gulp-connect 浏览器自动刷新

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']);

});

展示一下配置后的效果：

1. gulp启动任务后，可以看到终端显示在8080端口开启了一个http服务，而在35729端口开启了LiveReload服务，实际为一个WebSocket服务。

   
   
   

   clipboard.png

2. 打开页面，可以看到原始页面中插入了livereload的js文件。

clipboard1.png

3. 在network中WS下可以看到WebSocket的消息。

clipboard2.png

4. 当编辑代码发生变化时（Ctrl＋S保存后），浏览器会收到消息，触发F5刷新页面的操作。