Grunt livereload with node.js application

Question

I have written an application in Node.js (with Express & socket.io) and I would like to use Grunt to compile my client-side stuff with livereload while developing an

Answer 1

My answer is using Gulp that I am more familiar with, instead of Grunt, but I imagine the same approach would work with Grunt as well.

See my repository (and an older one) and my other answer.

Neither any browser extension nor adding any script to your files is needed.

The solution is based on the gulp-livereload and connect-livereload packages working together. First, you start your live reload listener, and pipe into it any file changes (change * to any more specific node-glob to listen to only specific files):

var gulpLivereload = require('gulp-livereload');

gulpLivereload.listen();

gulp.watch('*', function(file) {
  gulp.src(file.path)
    .pipe(gulpLivereload());
});

Second, you configure your server to use the listener as middleware via connect-livereload:

var connect = require('connect');
var connectLivereload = require('connect-livereload');

connect()
  .use(connectLivereload())
  .use(connect.static(__dirname))
  .listen(8080);

See the packages for more information on how they work internally.