grunt-contrib-watch with LiveReload not working

Question

I cannot get LiveReload to work with Grunt. I am using grunt-contrib-watch. While Grunt is watching the stated files, nothing is reloading in the browser. So I will see:

Running "watch" task
Completed in 0.203s at Thu Nov 21 2013 00:59:59 GMT-0500 (EST) - Waiting...
OK
>> File "views/index.html" changed.

But the browser window does not update. I am using LiveReload 2.0.9. Any suggestions on how to get it running?

Gruntfile.js

module.exports = function(grunt) {

  'use strict';

  grunt.initConfig({
    express: {
      dev: {
        options: {
          script: './app.js'
        }
      }
    },
    watch: {
      tasks:  [ 'express:dev' ],
      options: {
        livereload: true,
        nospawn: true
      },
      files: [
        './views/index.html',
        './preprocessing/css/style.scss'
      ]
    }
  });

  grunt.loadNpmTasks('grunt-express-server');
  grunt.loadNpmTasks('grunt-contrib-watch');

  grunt.registerTask('default', [ 'express:dev', 'watch' ]);
};

Answer 1

It looks all you're missing is including the livereload script in your document: <script src="//localhost:35729/livereload.js"></script> by default.

If you want to avoid having to do this manually, you can use the connect-livereload middleware.

Here's a sample Gruntfile.js that's setup for watching and livereloading using the middleware I linked to.