修改 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']);
};