Grunt-watch w/Livereload

Now that we have Grunt set up with Sass, when we run the grunt task in the CLI, this will process the edits we have. While in rapid development, going back the the CLI, typing in grunt and then refreshing the browser will get old fast.

Thankfully, we have options. grunt-contrib-watch is a npm package that will watch our Sass files and when one is touched, it will run the Grunt tasks to process it. To install:

  1. npm install --save-dev grunt-contrib-watch

As an added bonus, not only can we run a watcher that will process our Sass, but we can also watch .jade files for changes as well.

In the Gruntfile.js we need to add some Grunt tasks:

  1. module.exports = function(grunt) {
  2.   grunt.initConfig({
  3.     sass: {
  4.       dist: {
  5.         files: {
  6.           'public/stylesheets/style.css': 'sass/style.scss'
  7.         }
  8.       }
  9.     },
  10.     watch: {
  11.       source: {
  12.         files: ['sass/**/*.scss', 'views/**/*.jade'],
  13.         tasks: ['sass'],
  14.         options: {
  15.           livereload: true
  16.         }
  17.       }
  18.     }
  19.   });
  21.   grunt.loadNpmTasks('grunt-contrib-watch');
  22.   grunt.loadNpmTasks('grunt-sass');
  23.   grunt.registerTask('default', ['sass']);
  24. };

And there we have it. Grunt is installed, we have a functional Gruntfile.js and we can start writing some Sass too.

Add Livereload to layout.jade

In order to get Live reload to fire in the project we need to add a reference to a non-existent JavaScript file in the layout.jade file as the last thing in the <body> tag.

  1. script(src='http://localhost:35729/livereload.js')

In a new Express project, it would look like this:

  1. doctype html
  2. html
  3.   head
  4.     title= title
  5.     link(rel='stylesheet', href='/stylesheets/style.css')
  6.   body
  7.     block content
  9.     script(src='http://localhost:35729/livereload.js')

After this is added, go back and REFRESH the browser and then any edit in either Sass or Jade should fire the Livereload.