[gulp入門]gulp-connect瀏覽器自動刷新

　　LiveReload可以理解為即時刷新，在前端開發中，開發者在編寫或調試html/js/css代碼后需要從編輯器切換到瀏覽器，再刷新瀏覽器才能看到頁面變化，這種頻繁的操作在一定程度上影響了工作效率，而LiveReload可以幫助我們解決了這個問題。

　　實現原理：通過在本地開啟一個websocket服務，檢測文件變化，當文件被修改后觸發livereload任務，推送消息給瀏覽器刷新頁面。

　　安裝gulp-connect插件

　　npm install gulp-connect

　　配置代碼🌰：　

//定義依賴和插件
var gulp = require('gulp'),
    uglify = require('gulp-uglify'),
    concat = require('gulp-concat'),
    rename = require('gulp-rename'),
    connect = require('gulp-connect');//livereload
   
var jsSrc = 'src/js/*.js';
var jsDist = 'dist/js';

var htmlSrc = 'src/*.html';
var htmlDist = 'dist';

//定義名為js的任務
gulp.task('js', function () {

    gulp.src(jsSrc)
        .pipe(concat('main.js'))
        .pipe(gulp.dest(jsDist))
        .pipe(rename({suffix: '.min'}))
        .pipe(uglify())
        .pipe(gulp.dest(jsDist))
        .pipe(connect.reload())

});

//定義html任務
gulp.task('html', function () {

    gulp.src(htmlSrc)
        .pipe(gulp.dest(htmlDist))
        .pipe(connect.reload());

});

//定義livereload任務
gulp.task('connect', function () {
    connect.server({
        livereload: true
    });
});


//定義看守任務
gulp.task('watch', function () {

    gulp.watch('src/*.html', ['html']);

    gulp.watch('src/js/*.js', ['js']);

});


//定義默認任務
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刷新頁面的操作。