安裝

npm install --save-dev browser-sync

引入

var browserSync = require('browser-sync').create();
var reload = browserSync.reload;

監(jiān)聽(tīng)模板

gulp.task('html',function(){
 gulp.watch(["skin4/*.htm","skin4/**/*.htm"]).on('change',browserSync.reload);
});

熱重載

pipe(reload({stream:true}))

開(kāi)啟任務(wù)

gulp.task('browser-sync', function() {    browserSync.init({});});
gulp.task("default",function(){    gulp.start(["watchLess","watchJs","browser-sync","html"]);});

網(wǎng)站里面加上公共代碼 具體代碼需要查看控制臺(tái)輸出

Paste_Image.png

<script id="__bs_script__">document.write("<script async src='http://HOST:3000/browser-sync/browser-sync-client.2.13.0.js'><\/script>".replace("HOST", location.hostname));</script>

然后就可以通過(guò)自己本地配置的域名進(jìn)行訪問(wèn)了

具體網(wǎng)站配置文件
配置代碼

如果想同時(shí)監(jiān)聽(tīng)多個(gè)網(wǎng)站 就需要更改默認(rèn)端口號(hào) 相應(yīng)的網(wǎng)站里面引入文件的端口號(hào)也要改

Paste_Image.png

gulp.task('browser-sync', function() { browserSync.init({ port:3002 });});