This post explains how I got live-reloading to work with Grunt.

Idea

The basic idea is you use grunt-contrib-connect and [grunt-contrib-watch](https://github.com/gruntjs/grunt-contrib-watch) together to reload your site automagically in your browser(s).
So when you change a file that’s being watched, your browser will update. Nice!

Lesson Learnt

  • Update your NPM packages
  • Make sure watch tasks are not overriding or recursing into each other

Problems

Be careful with your watch task. If it is watching lots of files (like **/*) then you may run into this error:

1
2
3
4
2013-10-30 08:49 node[49991] (CarbonCore.framework) FSEventStreamStart: register_with_server: ERROR: f2d_register_rpc() => (null) (-21)
2013-10-30 08:49 node[49991] (CarbonCore.framework) FSEventStreamStart: register_with_server: ERROR: f2d_register_rpc() => (null) (-21)
2013-10-30 08:49 node[49991] (CarbonCore.framework) FSEventStreamStart: register_with_server: ERROR: f2d_register_rpc() => (null) (-21)
...

The solution I found for this was to be more specific about the kind of files to watch. In my case, I was watching **/*.html, which meant
I was watching source HTML files as well as generated HTML files. But also had a watch:dev task which was watching the generated files - including
the HTML files!

1
2
3
4
5
6
7
8
9
10
watch: {
...
  dev: {
    files: ['dev/**/*.html'],
    tasks: ['<%= env.environment.envName %>'],
    options: {
      livereload: true
    }
  }
}

More problems

The next issue I found was that I needed to add the livereload.js file to your HTML files. That is no problem - just add it to a template or
include file before the closing </body> tag:

1
<script src="//localhost:35729/livereload.js"></script>

But I noticed in Chrome that I was getting a 404 error loading livereload.js. So I tried using a different port - no improvment.
After some googling, I came across this article which suggested
that the version of grunt-contrib-watch might be out-of date.

So, I updated the package.json file to tell NPM to update grunt-contrib-watch to the latest version: 

1
2
3
4
5
6
7
8
9
{
  ...
  "devDependencies": {
    ...
    //"grunt-contrib-watch": "~0.3.2",
    "grunt-contrib-watch": "*",  
   ...
  }
}

Then run npm:

1
sudo npm update --save-dev

This brought the package version to 0.5.3. Now, running the task again, I can see that livereload.js is loaded by Chrome correctly,
and the page refreshes whenever I change a HTML or CSS page that is published into the dev folder - yay!

Final GruntFile.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
'use strict';
module.exports = function(grunt) {

  // Load tasks
  require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);
  
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    environments: {
      dev: {...  },
      prod: {  ...  }
    },
    ...
    watch: {
      ...
      dev: {
        files: ['dev/**/*.html', 'dev/**/*.css'],
        tasks: ['<%= env.environment.envName %>'],
        options: {
          livereload: true
        }
      }
    },
    ...
    exec: {
      build: {
        cmd: 'jekyll build'
      }
    },
    
    copy: {
      env: {
        files: [{expand: true, flatten: false, cwd:'_site', src: '**/*', dest: '<%= env.environment.outputDir %>'}]
      }
    },
    
    connect: {
      dev: {
        options: {
          port: 4000,
          base: 'dev'
        }
      },
      prod: {
        options: {
          port: 4000,
          base: 'dist'
        }
      }
    }
  });
  
  
  grunt.registerTask('env', 'Set environment variables for use by other tasks.', function(environment) {
    if (environment === null || environment === undefined) {
      grunt.warn('You must specify the environment as either DEV or PROD.');
      return false;
    }
    // Store the environment definition in 'env.environment'
    var envName = '' + environment.toLowerCase();
    var envDefinition = grunt.config.get('environments.' + envName);
    
    grunt.config.set('env.environment', envDefinition);
    
    var envName = grunt.config.get('env.environment.name');
    
    grunt.log.writeln(envName + ' environment <<<--------------------------------------');
  });
  
  grunt.registerTask('dev', ['env:dev', 'clean:env', 'exec:build', 'compass:build', 'copy:env', 'connect:dev', 'watch']);
};