watch doesn't refresh the page on file change (express site)

Question

It would be nice to have the browser automatically reload the page when I change a project file. I have this node-express site with the server being defined in 'server.js'

However, I've tried different grunt configurations, but none of them caused the browser to reload on a file change although the 'watch' task prints a message that the file changed!

Here is the relevant grunt configuration:

watch: {
    all: {
        files: 'views/index.ejs', // for now only watch this file!
        options: {
            livereload: true
        }
    }
},
express: {
    options: {
        background: true,
        error: function(err, result, code) {},
        fallback: function() {},
        port: 3000
        delay: 0,
        output: ".+",
        debug: false
    },
    dev: {
        options: {
            script: './server.js',
            node_env: 'development',
            livereload: true
        }
    }
}
....

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

And to run the task I do

$> grunt server

Can someone explain what is wrong with this configuration ?

thnx

Answer 1

You need to install the livereload browser plugin from http://livereload.com/