Gulp Livereload auto reload browser.

steps_gulp_livereload_simple

/*
Reload the page on file change.
At first it took me a while to figure out how to setup the server from 
the gruntfile to work with livereload and automatically reload the page in the browser.
Here are the steps that worked for me - it needs some fine tuning though.
*/

Useful links:
-------------
https://www.npmjs.com/package/gulp-connect
https://www.npmjs.com/package/gulp-livereload
http://feedback.livereload.com/knowledgebase/articles/86180-how-do-i-add-the-script-tag-manually-

/*
The following assume a directory structure like this
<project_dir>
  |-- <app>
  |-- package.json
  `-- gulpfile.js
*/

1. cd into your project's dir
2. Create
    |-- package.json
    `-- gulpfile.js
    
    ------ package.json example ------

        {
          "name": "MyAppName",
          "description": "An app that I make for various reasons",
          "version": "1.0.0",
          "author": "Me",
          "engines": {
            "node": ">= 0.10.0"
          },
          "devDependencies": {
            "bower": "~1.2.8",
            "gulp": "^3.9.0",
            "gulp-connect": "^2.2.0",
            "gulp-livereload": "^3.8.0",
            "gulp-watch": "^4.2.4"
          }
        }

     ------- gulpfile.js example -------

        var gulp        = require('gulp'),
            livereload  = require('gulp-livereload'),
            connect     = require('gulp-connect');

        gulp.task('connect', function() {
          connect.server({
            root: 'app',
            livereload: true
          });
        });

        gulp.task('html', function() {
          gulp.src('app/*.html')
            .pipe(livereload());
        });

        gulp.task('watch', function() {
          livereload.listen();
          gulp.watch('app/*.html', ['html']);
        });

        gulp.task('default', ['connect', 'html', 'watch']);

3. Install the required packages locally for the project
    npm install --save-dev gulp
    npm install --save-dev gulp-livereload
    npm install --save-dev gulp-connect
    npm install --save-dev gulp-watch

4. To avoid installing the Chrome extension for livereload 
    add this script into the file you want to reload. 
    This way you can work on firefox too.

    <script>
    // gulp-livereload
    document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')
    </script>

5. Simply run gulp and open the browser at the address shown

6. That's it!