How to use grunt-contrib-livereload?

Live reloading is now built into grunt-contrib-watch version 0.4.0. grunt-contrib-livereload and grunt-regarde will be deprecated soon.

Now just set the option livereload to true in your config and it will create a live reload server then reload after the tasks have run:

grunt.initConfig({
  watch: {
    all: {
      options: { livereload: true },
      files: ['lib/*.js'],
      tasks: ['jshint'],
    },
  },
});

By default the live reload server will be started on port 35729. So to enable live reloading on your page just add <script src="http://localhost:35729/livereload.js"></script> to your page.

View more info on the docs: https://github.com/gruntjs/grunt-contrib-watch#live-reloading

Edit: Check versioning info. grunt-contrib-watch now has livereload support baked in.

What a doozy. I ran into issues with this one too so let me do what I can to explain (or at least get you up and running). Keep in mind, this is how I have it set up and it seems to work most of the time.

For starters, you'll want to make sure you've udpated your package.json with the right dependencies. I'm not sure that livereload works with the baked in "watch" task and I've been using grunt-regarde of late. My package.json usually looks like this:

"dependencies": {
  "grunt": "~0.4.x",
  "grunt-contrib-livereload": "0.1.2",
  "grunt-contrib-connect": "0.2.0",
  "grunt-regarde": "0.1.1"
},

Obvi you want grunt (duhhh), livereload, connect seems to help with mounting folders, and regarde is like grunt-watch, it just seems to work better (I forget why exactly).

You could make your package.json even better by specifying livereload in its own "devDependencies" object if you're so inclined. Now, run your good old fasioned npm install to get the goodies in your project.

Let's talk gruntfiles:

As you probably know, the gruntfile is what makes the magic happen. Somewhere towards the bottom of your gruntfile, you'll want to specify

grunt.loadNpmTasks('grunt-regarde');
grunt.loadNpmTasks('grunt-contrib-livereload');
grunt.loadNpmTasks('grunt-contrib-connect');

At the top of your gruntfile, we'll want to add some utils for livereload. Under /*global module:false*/, go ahead and add var lrSnippet = require('grunt-contrib-livereload/lib/utils').livereloadSnippet;.

After that, you don't really need to learn connect, you just gotta use it. Check my style:

var folderMount = function folderMount(connect, point) {
  return connect.static(path.resolve(point));
};

This comes before module.exports = function(grunt) {

Now let's get into the meat of the gruntfile. Again, I forget what connect is doing but this is where the middleware magic comes into play. In your modules.exports, add:

connect: {
  livereload: {
    options: {
      port: 9999,
      middleware: function(connect, options) {
        return [lrSnippet, folderMount(connect, '.')]
      }
    }
  }
},

Now we want to have the files watched. I like to set up a few different tasks since I don't want my whole grunt process running every time I save a CSS file. Here's what I work with (again, add to module.exports):

regarde: {
  txt: {
    files: ['styles/*.css', 'index.html'],
    tasks: ['livereload']
  },
  styles: {
    files: ['sass/*.scss', 'sass/*/*.scss'],
    tasks: ['compass']
  },
  templates: {
    files: ['templates/*.jade'],
    tasks: ['jade']
  }
},

You can see that I only want livereload to fire when there have been changes to my compiled css (*.css) or to my compiled html. If I edit a SCSS file, I want to fire off just compass. If I edit a jade template, I want to only fire the jade to HTML compiler. I think you can see what's going on. You can toy with this, just be smart about it because you could get caught in an infinite loop.

Lastly, you need to fire off these processes. I like tying them all to my main grunt task because my gruntfile is just that sweet.

// Default task.
grunt.registerTask('default', ['livereload-start', 'connect', 'regarde']);

Now, when you fire up grunt in the CLI, you should (hopefully, maybe, cross your fingers) get something like this:

Running "connect:livereload" (connect) task
Starting connect web server on localhost:9999.

Browse to http://localhost:9999/yourpage.html and watch magic happen.

full gruntfile here. full package.json here.