安装

npm install --save-dev browser-sync

引入

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

监听模板

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

热重载

pipe(reload({stream:true}))

开启任务

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

网站里面加上公共代码 具体代码需要查看控制台输出

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>

然后就可以通过自己本地配置的域名进行访问了

具体网站配置文件
配置代码

如果想同时监听多个网站 就需要更改默认端口号 相应的网站里面引入文件的端口号也要改

Paste_Image.png

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