Livereload with grunt

Read these instructions to configure Grunt to interact with a Livereload server.

• What you get
• Requirements
• Configuration
• See also

What you get

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!

Requirements

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 -g grunt-cli

Install grunt and other packages

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

Configuration

I suppose there is at least an index.html and some JavaScript file under js/ folder.
I like to use coffee-script to edit configuration, i.e. I use a Gruntfile.coffee

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.

See also

• Node ecosystem
• Install Node.js without sudo
• Create an npm package
• Badges everywhere
• NodeICO badges
• Node class template