[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刷新页面的操作。
