This post explains how I got live-reloading to work with Grunt.
The basic idea is you use grunt-contrib-connect and [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 NPM packages
Make sure watch tasks 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:
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!
tasks: ['<%= env.environment.envName %>'],
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 </body> tag:
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:
Then run npm:
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!
I am a software engineer (with a focus on the front-end) with 15+ years in the IT industry, working with large telecommunications and financial companies. I’m passionate about creating great user experiences, writing code that is testable + maintainable + efficient, and seeing peoples’ lives changed-for-the-better.
I am the voice of one crying in the wilderness, “Make straight the way of the Lord!” John 1:23
I have been developing a website for a top-tier client in Melbourne. The site is built using AngularJS (v1.1.5 as of time of writing), SASS, Compass and GruntJs to pull it all together. The development team consisted of myself as lead dev, Mario Skouros, Peter Mescalchin and Steven Yip, with assistance from Michael Black and Vlado Grancaric. Well done guys!