Drupal 8 - GruntJS - SASS - BrowserSync

readme.md

Drupal 8 - Drush - GruntJS- SASS

Use GruntJS to automate Drupal 8 caches with Drush, SASS & BrowserSync

Gruntfile.js

'use strict';

module.exports = function(grunt) {
  // show elapsed time at the end
  require('time-grunt')(grunt);

  grunt.initConfig({
    notify_hooks: {
      options: {
        enabled: true,
        max_jshint_notifications: 5, // maximum number of notifications from jshint output
        title: "Website", // defaults to the name in package.json, or will use project directory's name
        success: false, // whether successful grunt executions should be notified automatically
        duration: 3 // the duration of notification in seconds, for `notify-send only
      }
    },
    notify: {
      sass: {
        options: {
          title: "CSS Files built",
          message: "Your SASS files are ready"
        }
      },
      twig: {
        options: {
          title: "TWIG files built",
          message: "Your templates are compiled & build cache cleared"
        }
      },
      script: {
        options: {
          title: "JS built",
          message: "Your scripts are compiled"
        }
      },
      php: {
        options: {
          title: "PHP built",
          message: "Your scripts are compiled"
        }
      },
      yml: {
        options: {
          title: "Drush CR Complete",
          message: "Your wait has ended."
        }
      }
    },
    // Watch Config
    watch: {
      scripts: {
        files: [
          'js/**/*.js',
        ],
        options: {
          livereload: true
        },
        tasks: ['notify:script']
      },
      twig: {
        files: ['templates/**/*.twig'],
        shell: {
            options: {
                stderr: false
            },
            target: {
                command: [
                  'drush cc views',
                  'drush cc render'
                ].join('&&')
            }
        },
        options: {
          livereload: true
        },
        tasks: ['notify:twig'],
        
      },
      php: {
        files: ['src/*.php'],
        shell: {
            options: {
                stderr: false
            },
            target: {
                command: [
                  'drush cc views',
                  'drush cc render'
                ].join('&&')
            }
        },
        options: {
          livereload: true
        },
        tasks: ['notify:php'],
      },
      yml: {
        files: ['*.yml', '*.theme'],
        options: {
          livereload: true
        },
        shell: {
            options: {
                stderr: false
            },
            target: {
                command: 'drush cr'
            }
        },
        tasks: ['notify:yml'],
      },
      sass: {
        files: 'scss/**/*.scss',
        tasks: ['sass', 'notify:sass', 'cssmin'],
        options: {
          livereload: true
        }
      },

      // images: {
      //   files: [
      //     'app/_public/images/**/*.{png,jpg,jpeg,webp}'
      //   ],
      // },
    },
    // Clean Config
    clean: {
      dist: {
        files: [{
          dot: true,
          src: [
            '.tmp'
          ]
        }]
      },
      server: ['.tmp'],
    },
    // Hint Config
    jshint: {
      options: {
        jshintrc: '.jshintrc'
      },
      all: [
        'Gruntfile.js',
        'js/**/*.js',
        '!bower_components/*',
        'test/spec/**/*.js'
      ]
    },
    // Sass Config
    sass: {
      options: {
        cacheLocation: '.tmp/.sass-cache'
      },
      dev: {
        options: {
          style: 'expanded',
          lineComments: true
        },
        files: [{
          expand: true,
          cwd: 'scss',
          dest: 'css',
          src: ['main.scss'],
          ext: '.css'
        }],
      },
    },
    // Rev Config
    rev: {
      dist: {
        files: {
          src: [
            'js/**/*.js',
            'css  /**/*.css',
            'img/**/*.{png,jpg,jpeg,gif,webp}',
            'fonts/**/*.*'
          ]
        }
      }
    },
    // useminPrepare Config
    useminPrepare: {
      options: {
        dest: '/'
      },
       css: ['css/{,*/}*.css'],
    },
    // Usemin Config
    usemin: {
      options: {
        dirs: ['/'],
        basedir: '/',
      },
      css: ['css/{,*/}*.css']
    },
    // CSSmin config
    cssmin: {
      dist: {
        files: {
          'css/main.min.css': 'css/main.css'
        }
      }
    },
    // HTML Config
    // htmlmin: {
    //   dist: {
    //     options: {
    //       /*removeCommentsFromCDATA: true,
    //                 // https://github.com/yeoman/grunt-usemin/issues/44
    //                 //collapseWhitespace: true,
    //                 collapseBooleanAttributes: true,
    //                 removeAttributeQuotes: true,
    //                 removeRedundantAttributes: true,
    //                 useShortDoctype: true,
    //                 removeEmptyAttributes: true,
    //                 removeOptionalTags: true*/
    //     },
    //     files: [{
    //       expand: true,
    //       cwd: 'assets',
    //       src: '*.html',
    //       dest: 'app/assets'
    //     }]
    //   }
    // },
    // Copy Config
    // Put files not handled in other tasks here
    // copy: {
    //   dist: {
    //     files: [{
    //       expand: true,
    //       dot: true,
    //       cwd: './',
    //       dest: '',
    //       src: [
    //         '*.{ico,png,txt}',
    //         '.htaccess',
    //         'imgs/{,*/}*.*'
    //       ]
    //     }]
    //   },
    //   styles: {
    //     expand: true,
    //     dot: true,
    //     cwd: 'css',
    //     dest: '.tmp/styles/',
    //     src: '{,*/}*.css'
    //   },
    // },
    // Concurrent Config
    concurrent: {
      dist: [
        'copy:styles',
        'svgmin',
        'htmlmin'
      ]
    },
    browserSync: {
      default_options: {
        bsFiles: {
          src: [
            'css/**/*.min.css',
            "css/*.css",
            "js/**/*.js",
            "*.html"
          ]
        },
        options: {
          watchTask: true,
          proxy: "localhost"
        }
      }
    }
  });


  // load all grunt tasks
  require('load-grunt-tasks')(grunt);

  grunt.task.run('notify_hooks');

  // Register Tasks
  grunt.registerTask('dev', 'Start working on this project.', [
    'browserSync',
    'watch'
  ]);

  // Build
  grunt.registerTask('build', 'Build production ready assets and views.', [
    'clean:dist',
    'concurrent:dist',
    'useminPrepare',
    'imagemin',
    'concat',
    'cssmin',
    'uglify',
    'copy:dist',
    'rev',
    'usemin'
  ]);

};

package.json

{
  "name": "Website",
  "version": "1.0.0",
  "description": "Drupal 8 theme",
  "main": "Gruntfile.js",
  "devDependencies": {
    "browser-sync": "^2.7.5",
    "grunt": "^0.4.1",
    "grunt-browser-sync": "^2.1.3",
    "grunt-concurrent": "~0.3.0",
    "grunt-contrib-clean": "~0.5.0",
    "grunt-contrib-concat": "~0.3.0",
    "grunt-contrib-connect": "~0.5.0",
    "grunt-contrib-copy": "~0.4.1",
    "grunt-contrib-cssmin": "~0.6.0",
    "grunt-contrib-htmlmin": "~0.1.3",
    "grunt-contrib-imagemin": "~0.2.0",
    "grunt-contrib-jshint": "~0.6.3",
    "grunt-contrib-uglify": "~0.2.0",
    "grunt-contrib-watch": "^0.5.2",
    "grunt-notify": "^0.4.1",
    "grunt-open": "~0.2.2",
    "grunt-rev": "~0.1.0",
    "grunt-sass": "^1.1.0",
    "grunt-shell": "^1.1.2",
    "grunt-svgmin": "~0.2.0",
    "grunt-usemin": "~0.1.10",
    "load-grunt-tasks": "~0.1.0",
    "time-grunt": "~0.1.1"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "Website"
  ],
  "author": "",
  "license": "ISC"
}