HTML JS CSSなどのファイルブラウザの自動更新を修正する

参照
HTML、JS、CSSなどのファイルを修正するたびに、
ブラウザを手動でリフレッシュすると、Gruntのプラグインによって自動リフレッシュが可能になります.(実は手動でリフレッシュしても手間がかからないと思いますが、O(∩∩)Oははは~)
testなどのフォルダを作成し、次の操作を行います.
1.まずNodeJs、Grunt環境があり、すでにあると仮定します.
2.packageという名前を新規作成します.jsonファイル.内容は以下の通り.
3.Gruntfileという名前の新しいファイルを作成します.jsファイル.内容は以下の通り.
4.packageによる.jsonファイルの定義、プラグインのインストール.npm install.
5.Gruntfile.によるjsファイルの定義でgrunt previewを実行します.
Gruntfile.jsの定義はtestの下にsrcディレクトリを新規作成し、srcに入ったらindexを新規作成します.htmlでテストを行います(htmlファイルにはbodyラベルがあることが望ましい).
ブラウザを開きます.アドレスはlocalhost:9001で、test/src/indexを変更します.htmlファイル、効果を見てください.

{
  "name": "live-reload-test",
  "version": "0.0.0",
  "dependencies": {
    "grunt": "*",
    "grunt-contrib-connect": "*",
    "grunt-contrib-watch": "*",
    "connect-livereload": "*"
  }
}

module.exports = function (grunt) {
  var LIVERELOAD_PORT = 35729;
  // lrSnippet is just a function.
  // It's a piece of Connect middleware that injects
  // a script into the static served html.
  var lrSnippet = require('connect-livereload')({ port: LIVERELOAD_PORT });
  // All the middleware necessary to serve static files.
  var livereloadMiddleware = function (connect, options) {
    return [
      // Inject a livereloading script into static files.
      lrSnippet,
      // Serve static files.
      connect.static(options.base),
      // Make empty directories browsable.
      connect.directory(options.base)
    ];
  };
  grunt.initConfig({
      connect: {
        client: {
          options: {
            port: 9001,
			hostname: '0.0.0.0',
            base: 'src/',
			middleware: livereloadMiddleware
          }
        }
      },
      
      watch: {
	    client: {
		  files: ['src/**/*'],
		  tasks: [],
		  options: {
		    livereload: true
		  }
		}
	  }	  
  });
  grunt.loadNpmTasks('grunt-contrib-connect');
  grunt.loadNpmTasks('grunt-contrib-watch');
  
  grunt.registerTask('preview', ['connect:client', 'watch:client']);
};