前端构建实践03：用 livereload 即时查看前端更改

Visual Studio 从 2013 版本开始引入了一个叫做“Browser Link”（浏览器链接）的功能，启用这项功能后，在 Visual Studio 中对 html、js、css文件进行修改后，只需要点击 Visual Studio 上的一个“刷新”按钮，所有打开了调试页面的浏览器窗口都会自动刷新，而不必和以往一样将界面切换回到各个浏览器按 F5。这个懒人功能在一定程度提高了开发效率（特别是在做多浏览器的兼容性测试时），但是一来，这个功能只能在 Visual Studio 上使用，二来仍不够方便，每次都要手动去点按刷新，那么是否能有一种更加通用、方便的方式来实现自动刷新即时预览？接下来介绍的就是一个可以实现这个功能的的 node.js 模块：livereload，只要五分钟，就能开启。

快速上手

1. 安装 Grunt

上一篇已经介绍了如何在项目中安装 Grunt。

npm install grunt --save-dev

2. 安装grunt-contrib-watch插件

grunt-contrib-watch是一个 Grunt 插件，它可以监视项目中文件的变化，然后执行特定的任务。比如，当插件监视到 less 文件被改动，可以自动地调用lessc把文件编译为 css 文件。而 livereload 正是grunt-contrib-watch内置的一个功能。

npm install grunt-contrib-watch --save-dev

3. 开启 livereload

往 Gruntfile.js 里添加代码：

module.exports = function(grunt) {
   
   
  grunt.initConfig({
    pkg: grunt.file.readJSON(