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.
Live reloading is now built into
grunt-contrib-watch
version0.4.0
.grunt-contrib-livereload
andgrunt-regarde
will be deprecated soon.Now just set the option
livereload
totrue
in your config and it will create a live reload server then reload after the tasks have run: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: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 fasionednpm 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
At the top of your gruntfile, we'll want to add some utils for livereload. Under
/*global module:false*/
, go ahead and addvar 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:
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:
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
):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.
Now, when you fire up
grunt
in the CLI, you should (hopefully, maybe, cross your fingers) get something like this:Browse to
http://localhost:9999/yourpage.html
and watch magic happen.full gruntfile here. full package.json here.
I know this is a little old but can help someone. In the Gruntfile.js add "options":
In the index add:
Here is a solution based on
Gulp
instead ofGrunt
and the followingGulpfile.js
to getlivereload
working: