当被监视的文件发生变化以后，会自动的刷新浏览器查看文件的变化 ... 这就是 livereload ... 实时刷新的功能 ... 我们可以把 watch 还有 connect 这两个任务结合到一块儿用 ...

先打开 Gruntfile.js ... 找到 connect 相关的配置 ... 在这个 options 里面 ... 添加一个 livereload 属性 ... 它的值设置成 true ... 表示这台服务器允许使用实时刷新的功能 ..

connect: {
server: {
options: {
base: 'dist',
livereload: true
}
}
},

再找到 watch 任务的配置 ... 在它的目标里面，如果想要使用实时刷新的功能 ... 也得把 livereload 的值设置成 true .. 这个 livereload 属性要放到 options 里面 ... 先添加一个 options ... 在这个选项对象里面 ... 把 livereload 这个属性的值，设置成 true ...

watch: {
html: {
files: ['index.html'],
tasks: ['copy:html'],
options: {
livereload: true
}
}
},

下面再去创建一个任务，在执行这个任务的时候，同时去执行 watch 还有 connect ... grunt.registerTask ... 这个任务可以叫它 serve ... 它的第二个参数就是要执行的任务列表 .. 用一个数组 ... 先添加一个 connect ... 再添加一个 watch ...

保存 ... 打开命令行工具 ... 输入 grunt serve ... 然后在浏览器上打开服务器 　localhost:8000 ... 先回到项目 ... 打开项目根目录下面的 index.html ... 修改一下这个文件里的内容 ... 然后保存一下 ...

因为我们使用 watch 监视了这个文件变化，并且让它自动去执行 copy 任务 ... 这个任务会把 index.html 复制到 dist 的目录下面 ... 因为我们又使用了实时刷新的功能 .. 所以，不需要我们手工去刷新浏览器 ... 它会自动刷新，显示出文件修改之后的结果 ..