用gulp-livereload实现浏览器自动刷新页面

参考：Gulp.js-livereload 不用F5了，实时自动刷新页面来开发

参考： 用gulp-livereload实现自动刷新页面（v3.0.2）

       前面介绍到 gulp 前端自动构建工具，下面我们就来感受一下 gulp 搭配其其他插件 gulp-livereload 所带来的强大力量吧。

在搭建使用gulp-livereload实时自动刷新页面的过程中，需要注意的几点是：

       1、使用 gulp-livereload 需要使用 chrome 浏览器，并且安装 gulp-livereload 插件；

       2、在 gulpfile.js 中创建task， 旧版使用var server = livereload();已经失效，需要使用 livereload.listen(); ；

       3、使用 gulp-livereload 需要使用到服务器，在服务器下进行访问，开启 gulp-livereload 插件；（当然也可以使用 npm 安装 http-server 来启动服务）

gulpfile.js 如下：

/**
 * Created by DreamBoy on 2016/8/21.
 */
var gulp = require('gulp'),
    livereload = require('gulp-livereload');

gulp.task('watch', function() { //这里的watch，是自定义的，携程live或者别的也行
    livereload.listen();//这里需要注意！旧版使用var server = livereload();已经失效  
    // app/**/*.* 的意思是 app 文件夹下的 任何文件夹 的 任何文件
    gulp.watch('app/**/*.*', function(event) {
    	livereload.changed(event.path);
    });
});

成功搭建后，我们可以在 app 文件夹下修改页面，当页面的文件被保存时，浏览器就会进行实时更新，而不需要我们自己去手动刷新。