gruntjs - How to use grunt-contrib-livereload?

Question

I'm trying to use grunt-contrib-livereload, but can't seem to figure it out. The readme seems to skip over everything that I need explained, and then ends with an example that doesn't work when I try it and doesn't seem directly related to the documentation. I have searched for a better explanation in a blog post or tutorial or whatever, but haven't been able to find one. Can someone please explain how to get started with this tool?

Here are the kinds of questions I have, based on the readme:

The documentation says the livereload task "must be passed the list of files that have changed" --- but how do I pass it this list of files? The example does not seem to illustrate this. Does regarde pass the list?

Is grunt-contrib-connect required? What does it do, and how do I use it? Do I need to learn connect before I try using livereload?

The readme mentions middleware that "must be the first one inserted" --- but inserted into what, before what else? And how is it inserted?

And I suppose I don't understand how I need to manipulate ports. "All the browsers listening on the livereload port will be reloaded" --- but how do I know which browser is listening to which port? Do I need to learn all about ports before I can try using livereload? (Any suggestion on how to best learn about that?)

Finally, in the example, there is a folderMount function that doesn't seem related to any of the documentation before. What is that, and do I need it?

I guess I'm asking if someone can please:

• point me towards a tutorial that is much more effective than the current readme;
• explain these unexplained parts of the readme, if those answers are what I need to understand the plugin;
• or provide a functional example with some explanation of why it is functional.

Answer 1

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