This post explains how I got live-reloading to work with Grunt.
The basic idea is you use
[grunt-contrib-watch](https://github.com/gruntjs/grunt-contrib-watch) together to reload your site automagically in your browser(s).
So when you change a file that’s being watched, your browser will update. Nice!
- Update your
- Make sure
watchtasks are not overriding or recursing into each other
Be careful with your watch task. If it is watching lots of files (like
**/*) then you may run into this error:
2013-10-30 08:49 node (CarbonCore.framework) FSEventStreamStart: register_with_server: ERROR: f2d_register_rpc() => (null) (-21)
The solution I found for this was to be more specific about the kind of files to watch. In my case, I was watching
**/*.html, which meant
I was watching source HTML files as well as generated HTML files. But also had a watch:dev task which was watching the generated files - including
the HTML files!
The next issue I found was that I needed to add the
livereload.js file to your HTML files. That is no problem - just add it to a template or
include file before the closing
But I noticed in Chrome that I was getting a 404 error loading
livereload.js. So I tried using a different port - no improvment.
After some googling, I came across this article which suggested
that the version of
grunt-contrib-watch might be out-of date.
So, I updated the
package.json file to tell
NPM to update
grunt-contrib-watch to the latest version:
sudo npm update --save-dev
This brought the package version to 0.5.3. Now, running the task again, I can see that
livereload.js is loaded by Chrome correctly,
and the page refreshes whenever I change a HTML or CSS page that is published into the
dev folder - yay!