当某些文件发生变化以后，可以实时的去刷新一下浏览器，这样我们就不需要每次修改文件以后，再去手工刷新浏览器查看变化了。

打开 gulpfile.js ... 找到创建服务器的这个任务 .. 在这里，可以先把 server 方法里面的 livereload 这个选项的值设置成 true .. 意思就是启用实时刷新的功能。

connect.server({root: 'dist', livereload: true});

然后，我们可以配置一下，当什么样的文件发生变化的时候，去自动刷新浏览器 .. 比如我们想让浏览器在 index.html 这个文件发生变化以后，去刷新一下 ...

在这个 copy-index 任务里面，把文件复制到目的地以后，再执行一下刷新 ... 在后面加上一个 .pipe 管道 .. 这个管道干的事就是去刷新浏览器 ... 可以使用 connect 的 reload 这个方法 ..

gulp.task('copy-index', function () {
return gulp.src('index.html')
.pipe(gulp.dest('dist'))
.pipe(connect.reload());
});

因为在下面的 watch 这个任务里面，我们已经监视了 index.html 这个文件的变化，一旦发生变化，就去执行 copy-index 这个任务，这个任务现在要做的事就是去把 index.html 复制到 dist 这个目录的下面，然后再刷新一下浏览器 ..

最后我们可以再去创建一个默认的任务 ... 输入 gulp.task ... 任务的名字是 default ... 这个任务依赖 server ... 还有 watch 这两个任务 ...

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

保存 ... 打开命令行工具 .. 先停止一下服务器 ... ctrl + C ... 然后再执行 gulp ... 这样会起动服务器，并且开始监视文件的变化 ..

打开浏览器，刷新一下 ... 再回到项目 ... 打开根目录下面的 index.html ... 这里我们可以修改一下这个文件 ... 然后保存一下 ... 你会发现，在浏览器上，会实时的显示出文件的变化 ...