Grunt files for Drupal theming (including clever drush cache clearing)

Gruntfile.js

/**
 * Grunt file for Drupal theming, including clever drush cache clearing.
 *
 * Usage in docker4drupal environment: `grunt --docker`
 * It ensures, that drush is executed from the php container.
 */

module.exports = function (grunt) {

  var drush_path = 'drush';
  if (grunt.option('docker')) {
    drush_path = 'docker-compose exec --user 82 php drush';
  }

  // This is where we configure each task that we'd like to run.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    watch: {
      // This is where we set up all the tasks we'd like grunt to watch for changes.
      scripts: {
        files: ['js/source/**/*.js'],
        tasks: ['uglify'],
        options: {
          spawn: false,
        },
      },
      images: {
        files: ['source-images/**/*.{png,jpg,gif}'],
        tasks: ['imagemin'],
        options: {
          spawn: false,
        }
      },
      vector: {
        files: ['source-images/**/*.svg'],
        tasks: ['svgmin'],
        options: {
          spawn: false,
        }
      },
      css: {
        files: ['sass/**/*.{scss,sass}'],
        tasks: ['sass', 'autoprefixer']
      },
      templates: {
        files: ['templates/**/*.tpl.php'],
        tasks: ['shell:drush_cc:theme-registry']
      },
      theme: {
        files: ['*.info'],
        tasks: ['shell:drush_cc:theme-registry']
      },
      includes: {
        files: ['../../modules/custom/**/*.inc', '../../modules/custom/**/*.module', '../../modules/custom/**/*.info', 'panels-layouts/**/*.inc', 'panels-layouts/**/*.tpl.php'],
        tasks: ['shell:drush_cc:registry'],
      },
    },
    uglify: {
      // This is for minifying all of our scripts.
      options: {
        sourceMap: true,
        mangle: false
      },
      my_target: {
        files: [{
          expand: true,
          cwd: 'js/source',
          src: '{,*/}*.js',
          dest: 'js/build'
        }]
      }
    },
    imagemin: {
      // This will optimize all of our images for the web.
      dynamic: {
        files: [{
          expand: true,
          cwd: 'source-images/',
          src: ['{,*/}*.{png,jpg,gif}'],
          dest: 'img/'
        }]
      }
    },
    svgmin: {
      options: {
        plugins: [{
          removeViewBox: false
        }, {
          removeUselessStrokeAndFill: false
        }]
      },
      dist: {
        files: [{
          expand: true,
          cwd: 'source-images/',
          src: ['{,*/}*.svg'],
          dest: 'img/'
        }]
      }
    },
    sass: {
      // This will compile all of our sass files
      // Additional configuration options can be found at https://github.com/sindresorhus/grunt-sass
      options: {
        sourceMap: true,
        // This controls the compiled css and can be changed to nested, compact or compressed.
        outputStyle: 'expanded',
        precision: 5
      },
      dist: {
        files: {
          'css/screen.css': 'sass/prototype/screen.scss',
          'css/screen-ramsalt.css': 'sass/ramsalt/screen-ramsalt.scss',
          'css/print-ramsalt.css': 'sass/ramsalt/print-ramsalt.scss'
        }
      }
    },
    shell: {
      drush_cc: {
        command: function (cache_type) {
          return drush_path + ' cc ' + cache_type;
        },
      },
    },
    autoprefixer: {
      options: {
        browsers: ['last 2 versions']
      },
      dist: {
        files: {
          'css/screen.css': 'css/screen.css',
          'css/screen-ramsalt.css': 'css/screen-ramsalt.css',
          'css/print-ramsalt.css': 'css/print-ramsalt.css'
        }
      }
    },
    browserSync: {
      dev: {
        bsFiles: {
          src: [
            'css/{,*/}*.css',
            'templates/{,*/}*.twig',
            'image-source/{,*/}*.{png,jpg,gif,svg}',
            'js/build/{,*/}*.js',
            '*.theme',
            'template.php'
          ]
        },
        options: {
          watchTask: true,
          // Change this to "true" if you'd like the css to be injected rather than a browser refresh. In order for this to work with Drupal you will need to install https://drupal.org/project/link_css keep in mind though that this should not be run on a production site.
          injectChanges: false
        }
      }
    },
  });
  // This is where we tell Grunt we plan to use this plug-in.
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-imagemin');
  grunt.loadNpmTasks('grunt-svgmin');
  grunt.loadNpmTasks('grunt-sass');
  grunt.loadNpmTasks('grunt-autoprefixer');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-browser-sync');
  grunt.loadNpmTasks('grunt-shell');
  // Now that we've loaded the package.json and the node_modules we set the base path
  // for the actual execution of the tasks
  // grunt.file.setBase('/')
  // This is where we tell Grunt what to do when we type "grunt" into the terminal.
  // Note: if you'd like to run and of the tasks individually you can do so by typing 'grunt mytaskname' alternatively
  // you can type 'grunt watch' to automatically track your files for changes.
  grunt.registerTask('default', ['browserSync', 'watch']);
};

package.json

{
  "name": "###your_theme_name###",
  "version": "1.0.0",
  "dependencies": {
    "grunt": "^0.4.5",
    "grunt-autoprefixer": "^3.0.3",
    "grunt-browser-sync": "^2.2.0",
    "grunt-contrib-concat": "^0.5.1",
    "grunt-contrib-imagemin": "^1.0.0",
    "grunt-contrib-uglify": "^0.11.0",
    "grunt-contrib-watch": "^0.6.1",
    "grunt-notify": "^0.4.3",
    "grunt-sass": "^1.1.0",
    "grunt-svgmin": "^3.1.2",
    "grunt-shell": "^2.1.0"
  },
  "description": "",
  "main": "Gruntfile.js",
  "devDependencies": {},
  "author": "",
  "license": "MIT",
  "scripts": {
    "postinstall": "find node_modules/ -name \"*.info\" -type f -delete"
  }
}