gulp4 構建簡單的服務器(gulp-connect)並實現自動刷新(livereload)

iveReload可以理解爲即時刷新，編輯器內容發生改變時，頁面實時刷新，不用開發者手動點擊刷新按鈕就可以看到修改效果。
實現原理：通過在本地開啓一個websocket服務，檢測文件變化，當文件被修改後觸發livereload任務，推送消息給瀏覽器刷新頁面。

安裝 gulp 及依賴

安裝 gulp 命令行工具

npm install --global gulp-cli

**在項目目錄下創建 package.json 文件

npm init

安裝 gulp，作爲開發時依賴項

npm install --save-dev gulp

安裝gulp-connect依賴

npm install gulp-connect --save-dev

創建 gulpfile 文件

下面只列舉搭建服務器部分：

var gulp = require('gulp');
var connect = require('gulp-connect');

// 搭建服務器
gulp.task('connect', function() {
  connect.server({
    port: 8020,
    livereload: true
  });
});

gulp.task('build', gulp.series('connect'));

運行

gulp啓動任務後，可以看到終端顯示在8020端口開啓了一個http服務，而在35729端口開啓了LiveReload服務，實際爲一個WebSocket服務。

瀏覽器輸入地址查看

打開頁面，可以看到原始頁面中插入了livereload的js文件。

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

這樣就完成了，代碼改變時，頁面也會實時跟着變化。