browser-sync 服务器使用

Posted 2020-10-14 rongfengliang-荣锋亮

1. 安装

npm  install  browser-sync
or
yarn add browser-sync

2. 使用（集成gulp）

备注： 
   gulp 安装使用此处不介绍
   默认的端口是3000，默认的ui界面端口3001
   可以进行修改
   
Gulpfile.js 内容

var bSync = require("browser-sync");
gulp.task("server",(done)=>{
  bSync({
   server:{
    baseDir:["dist",\'app\']
   },
   port:8012
  });
  done();
})

// reload 处理
gulp.watch("dist/**").on(\'change\', reload);

3. 界面效果 

 UI 管理界面：

 

项目界面：

 

4. 说明

功能还是比较强大的，可以同时可以做为代理，同时还可以进行页面调试

类似的工具 live-server  webpack 的调试工具

 

5. 参考文档

http://www.browsersync.cn/docs/options/
http://www.browsersync.cn/docs/gulp/
https://www.npmjs.com/package/live-server