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!


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


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

Now, if you launch

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