Livereload 可以理解为即时刷新，在前端开发中，开发者在编写或调试 html/js/css 代码后需要从编辑器切换到浏览器，再刷新浏览器才能看到页面变化，这种频繁的操作在一定程度上影响了工作效率，而 liveReload 可以帮助我们解决了这个问题。
实现原理： 通过在本地开启一个 websocket 服务，检测文件变化，当文件修改后触发 livereload 任务，推送消息给浏览器刷新页面。
第一步：全局安装 gulp 和 当前目录部署 gulp 和 gulp-connect 插件
npm install -g gulp
npm install --save-dev gulp gulp-connect
第二步：安装 chrome 插件，点我去安装
第三步：新建文件 gulpfile.js 配置代码：
// 定义依赖和插件
var gulp = require('gulp'),
connect = require('gulp-connect'); //livereload
// 需要检测的文件路径
var htmlSrc = '../protected/modules/prepay/views/**/*.php',
jsSrc = '../static/prepay/js/*.js',
cssSrc = '../static/prepay/style/*.css';
// 默认任务
gulp.task('default', [ 'css', 'js', 'html','watch', 'connect']);
//定义livereload任务
gulp.task('connect', function() {
connect.server({
livereload: true
});
});
//定义html任务
gulp.task('html', function(){
gulp.src(htmlSrc)
.pipe(connect.reload());
});
//定义js任务
gulp.task('js', function(){
gulp.src(jsSrc)
.pipe(connect.reload());
});
//定义css任务
gulp.task('css', function(){
gulp.src(cssSrc)
.pipe(connect.reload());
});
/* 这里的watch，是自定义的，写成live或者别的都行 */
gulp.task('watch', function() {
gulp.watch(htmlSrc, ['html']);
gulp.watch(jsSrc, ['js']);
gulp.watch(cssSrc, ['css']);
});
展示一下配置后的效果：
-
gulp启动任务后，可以看到终端显示在8080端口开启了一个http服务，而在35729端口开启了LiveReload服务，实际为一个WebSocket服务。
clipboard.png 打开页面，可以看到原始页面中插入了livereload的js文件。
clipboard1.png
- 在network中WS下可以看到WebSocket的消息。
clipboard2.png
- 当编辑代码发生变化时（Ctrl＋S保存后），浏览器会收到消息，触发F5刷新页面的操作。
