[gulp入门]gulp-connect浏览器自动刷新

LiveReload可以理解为即时刷新，在前端开发中，开发者在编写或调试html/js/css代码后需要从编辑器切换到浏览器，再刷新浏览器才能看到页面变化，这种频繁的操作在一定程度上影响了工作效率，而LiveReload可以帮助我们解决了这个问题。

　　实现原理：通过在本地开启一个websocket服务，检测文件变化，当文件被修改后触发livereload任务，推送消息给浏览器刷新页面。

　　安装gulp-connect插件

　　npm install gulp-connect

　　配置代码🌰：　

 1 //定义依赖和插件
 2 var gulp = require('gulp'),
 3     uglify = require('gulp-uglify'),
 4     concat = require('gulp-concat'),
 5     rename = require('gulp-rename'),
 6     connect = require('gulp-connect');//livereload
 7    
 8 var jsSrc = 'src/js/*.js';
 9 var jsDist = 'dist/js';
10 
11 var htmlSrc = 'src/*.html';
12 var htmlDist = 'dist';
13 
14 //定义名为js的任务
15 gulp.task('js', function () {
16 
17     gulp.src(jsSrc)
18         .pipe(concat('main.js'))
19         .pipe(gulp.dest(jsDist))
20         .pipe(rename({suffix: '.min'}))
21         .pipe(uglify())
22         .pipe(gulp.dest(jsDist))
23         .pipe(connect.reload())
24 
25 });
26 
27 //定义html任务
28 gulp.task('html', function () {
29 
30     gulp.src(htmlSrc)
31         .pipe(gulp.dest(htmlDist))
32         .pipe(connect.reload());
33 
34 });
35 
36 //定义livereload任务
37 gulp.task('connect', function () {
38     connect.server({
39         livereload: true
40     });
41 });
42 
43 
44 //定义看守任务
45 gulp.task('watch', function () {
46 
47     gulp.watch('src/*.html', ['html']);
48 
49     gulp.watch('src/js/*.js', ['js']);
50 
51 });
52 
53 
54 //定义默认任务
55 gulp.task('default', [ 'js', 'html','watch', 'connect']);

 

　　展示一下配置后的效果：

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

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

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

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