Livereload with grunt

Read this instructions to configure Grunt to interact with a Livereload server. It means that, after changing your html, css and js files, you don’t need to refresh your browser to see changes.

Your page will magically change, as you save your files!

Create a package.json

$ cd /path/to/your/working/folder/
$ npm init

Install grunt-cli globally (only once).

$ npm uninstall -g grunt-cli
$ npm install grunt-cli -g

Install grunt and other packages

$ npm install grunt --save-dev
$ npm install grunt-contrib-connect --save-dev
$ npm install grunt-contrib-watch --save-dev
$ npm install grunt-open --save-dev

I suppose there is at least an index.html and some JavaScript files under js/ folder. I like to use coffee-script to edit my Gruntfile, so here it is a working configuration

Loading …. gist https://gist.github.com/fibo/7054215

Now, if you launch

$ grunt

Your browser will open, and the window will change as soon as you modify your files.