Chris J. Lee

Dallas Drupal Developer

You are here

Getting grunt watch for sass, and livereload to work

Why use grunt for watching

I recently decided it's important to move toward using grunt to create builds instead of using just bundler/guard for the following reasons:

  • Bundler only provides rubygem dependancy management
  • Guard only provides the ability to watch files
  • Guard server doesn't provide the ability to run other tasks

Feel free to correct me if i'm wrong via commenting below, or tweeting at me. I'm still learning everything.

Steps to get grunt watch setup

If you have grunt already installed you can move to the next section.

sudo apt-get install rubygems
sudo gem install sass compass
  • Optionally, If you need to install bundler.
sudo gem install bundler
  • Make sure you've install all grunt dependencies:
npm -g install grunt-contrib-watch grunt-contrib-sass

Please note no need to install grunt-contrib-livereload

As of October 26, 2013, there's no longer a need to install grunt-contrib-livereload because it's been merged into with grunt-contrib-watch project.

I already have grunt installed, now what?

In your project root, create a Gruntfile:

'use strict';

module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    sass: {
      dist: {
        files: {
            'css/style.css' : 'sass/style.scss'
        }
      }
    },
    watch: {
      all: {
        files: 'index.html', // Change this if you are not watching index.html
        options: {
          livereload: true  // Set livereload to trigger a reload upon change
        }
      },
      css: {
        files: '**/*.scss',
        tasks: ['sass']
      },
      options: {
        livereload: true, // Set livereload to trigger a reload upon change
      }
    }
  });

  // Load these required NPM tasks:
  grunt.loadNpmTasks('grunt-contrib-sass');
  grunt.loadNpmTasks('grunt-contrib-watch');

  grunt.registerTask('default',['watch']); // This registers the watch task as the default task. If you require more tasks, create another one

};
© 2017 Chris J. Lee