搭建本地服務器的兩種方式：gulp-webserver 或者 browser-sync 都可以實現瀏覽器的自動刷新。
一、gulp-webserver
gulp-webserver 是搭建本地服務器，並開啓，可以用它實現自動刷新瀏覽器的功能。
安裝
使用npm安裝開發環境依賴
$ npm i gulp-webserver --save-dev
或者使用yarn安裝開發環境依賴
$ yarn add gulp-webserver -D
關於yarn的使用可以查看：https://blog.csdn.net/Charissa2017/article/details/104751956
用法
使用gulp.src()參數是web服務器的根目錄，可能有多個目錄。
這裏使用gulp4的函數寫法：
var gulp = require('gulp');
var gulpServer = require('gulp-webserver');
function startServer() {
return src("./dev/")
.pipe(gulpServer({
port: 8008,//端口號
host: "127.0.0.1",//主機名
livereload: true,//是否熱更新
open: true,//是否打開瀏覽器
}))
}
exports.default=startServer;
參數含義
| 屬性名 | 類型 | 默認值 | 描述 |
|---|---|---|---|
| host | String | localhost | web服務器的主機名 |
| port | Number | 8000 | 端口號 |
| path | String | / | 網絡服務器的路徑 |
| livereload | Boolean/Object | false | 是否支持熱更新 |
| directoryListing | Boolean/Object | false | 是否顯示目錄列表 |
| fallback | String | undefined | 文件後退到（相對於Web服務器根目錄） |
| open | Boolean/String | false | 是否打開瀏覽器，可以指定默認路徑 |
| https | Boolean/Object | false | 是否使用https |
| middleware | Function/Array | [] | 連接中間件功能或中間件功能列表 |
| proxies | Array | [] | 代理對象列表 |
通過 gulp-webserver 設置 fallback 爲index.html 可以實現單頁面應用：
var gulp = require('gulp');
var gulpServer = require('gulp-webserver');
function webserver(){
return gulp.src("./dist/")
.pipe(gulpServer({
fallback:"index.html"
}))
}
exports.default=webserver;
搭配本地服務器，監聽文件改變實現頁面自動刷新：
//解構賦值
const {src,series,dest,watch} = require("gulp");
//gulp自動加載插件
const plugins=require("gulp-load-plugins")();
//html處理
function copyHtml() {
return src("./src/views/**/*.html")
.pipe(dest("./dev/"))
}
//css處理
function compileCss() {
return src("./src/style/**/*.scss")
.pipe(plugins.sass().on("error", sass.logError))
.pipe(plugins.concat("all.css"))
.pipe(dest("./dev/"))
}
//js處理
function compileJs() {
return src("./src/js/**/*.js")
.pipe(plugins.concat("c.js"))
.pipe(plugins.uglify())
.pipe(plugins.rename("c.min.js"))
.pipe(dest("./dev/"))
}
//開啓服務
function startServer() {
return src("./dev/")
.pipe(plugins.webserver({
port: 8008,
host: "127.0.0.1",
livereload: true,
open: true,
}))
}
//監聽
function watchFile() {
watch("./src/style/**/*.scss", (cb) => {
compileCss();
cb();
})
watch('./src/js/**/*.js', (cb) => {
compileJs();
cb();
})
watch('./src/views/**/*.html', (cb) => {
copyHtml();
cb();
})
}
exports.default = series(copyHtml, compileCss, compileJs, startServer, watchFile);
二、browser-sync
Browsersync 會自動啓動一個小型服務器，並提供一個URL來查看你的網站，能讓瀏覽器實時、快速響應您的文件更改（html、js、css、sass、less等）並自動刷新頁面。
更重要的是 Browsersync可以同時在PC、平板、手機等設備下進項調試。您可以想象一下：“假設您的桌子上有pc、ipad、iphone、android等設備，同時打開了您需要調試的頁面，當您使用browsersync後，您的任何一次代碼保存，以上的設備都會同時顯示您的改動”。
安裝
使用npm安裝開發環境依賴
$ npm install browser-sync --save-dev
或者使用yarn安裝開發環境依賴
$ yarn add browser-sync -D
警告 - 不要使用sudo！ 如果你在 Mac OSX 下安裝Browsersync並遇到問題時 - 無論是在(Global)全局還是在(Local)本地，它幾乎總是因爲你的NPM權限所引起的問題。查看相關 說明文檔 瞭解如何一勞永逸來解決這個問題 - 只需2分鐘:)
用法
- browser-sync 是靜態服務器，create() 開啓創建；
- 使用browser.init 創建服務位置和端口，server表示訪問目錄，自動會打開該目錄下的index.html文件。
- 使用gulp.watch 做監聽，並且重新執行js 的合併壓縮打包等處理，最後當存儲完成後，刷新網頁browser.reload 是重載頁面；
搭配本地服務器，監聽文件改變實現頁面自動刷新：
var gulp=require("gulp");
var plugins=require("gulp-load-plugins")();
var browser=require("browser-sync").create();//打開瀏覽器
//js處理
gulp.task("setJs",function(){
gulp.src("./js/*.js")
.pipe(plugins.concat("c.js"))
.pipe(plugins.uglify())
.pipe(plugins.rename("c.min.js"))
.pipe(gulp.dest("./dist/"))
.on("end",browser.reload);
})
//sass處理
gulp.task("setSass",function(){
gulp.src("./scss/b.scss")
.pipe(plugins.sass())
.pipe(plugins.minifyCss())
.pipe(plugins.rename("c.min.css"))
.pipe(gulp.dest("./dist/"))
.on("end",browser.reload);
})
//html處理
gulp.task("setHtml",function(){
gulp.src("./index.html")
.pipe(gulp.dest("./dist/"))
.on("end",browser.reload);
})
//監聽
gulp.task("default",["setJs","setSass"],function(){
browser.init({
server:"./",
port:4001
})
gulp.watch("./js/*.js",["setJs"]);
gulp.watch("./scss/*.scss",["setSass"]);
gulp.watch("./index.html",["setHtml"]);
})