Quick Start with Grunt LiveReload

configure_LiveReload

THIS IS A Command run-through to get a browser to automatically update when there are changes to a project file.   
  # Reference Reading: http://gruntjs.com/getting-started#preparing-a-new-grunt-project
  #                    https://github.com/gruntjs/grunt-contrib-watch/issues/75
$ node -v 
  # success? continue : install node https://nodejs.org/ || $ nodenv versions ; $ nodenv global <version> (Boxen case)
$ npm -v
  # success? continue : erm... ?
$ npm install -g grunt-cli
  # That's the global stuff done. Now per project: 

$ cd <project>
  # EITHER
$ cat > package.json <<'_EOF'
{
  "name": "app-name",
  "version": "0.0.1",
  "devDependencies": {
    "grunt": "~0.4.1"
  }
}
_EOF
  # OR
$ npm init     # This creates a package.json for you. 
$ npm install
$ npm install grunt-contrib-watch --save-dev  # We could have added "grunt-contrib-watch": "^0.6.1" to devDependencies above
                                              # It would have achieved the same result after npm install. 
$ cat > Gruntfile.json <<'_EOF'
module.exports = function(grunt) {
  grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.initConfig({
    watch: {
      options: { livereload: true },
      files: ['index.html'],
    },
  });
};
_EOF

## Install LiveReload in your browser here: http://livereload.com/extensions/  (following instructions) 
  # Browser Reboot? Try without, if fails, try after reboot. 
$ open index.html   # - through a file:// url. 
$ grunt watch
  # Make changes to index.html
  # Browser should update. 

# See also: http://rhumaric.com/2013/07/renewing-the-grunt-livereload-magic/