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
 
 
 
 

browser-sync 服务器使用的更多相关文章

  1. web页面实时刷新之browser sync

    web开发对实时刷新的需求 在刚开始学习前端时每次修改文件内容后都需要手工刷新下浏览器来看效果,做的次数多了就特别难受,有时仅仅修改了一个字母都需要刷新下页面查看 之后接触到编写边看的集成IDE,文件 ...

  2. C#中获取服务器IP,客户端IP以及网卡物理地址

    客户端ip: Request.ServerVariables.Get("Remote_Addr").ToString(); 客户端主机名: Request.ServerVariab ...

  3. c#中获取服务器IP,客户端IP以及Request.ServerVariables详细说明

    客户端ip: Request.ServerVariables.Get("Remote_Addr").ToString();  客户端主机名: Request.ServerVaria ...

  4. c#中获取服务器IP,客户端IP以及其它

    客户端ip:Request.ServerVariables.Get("Remote_Addr").ToString();客户端主机名:Request.ServerVariables ...

  5. [Netty] - Netty入门(最简单的Netty客户端/服务器程序)

    Java中的NIO是一种解决阻塞式IO问题的基本技术,但是NIO的编写对java程序员是有比较高的要求的.那么Netty就是一种简化操作的一个成熟的网络IO编程框架.这里简单介绍一个程序,代码是< ...

  6. puppeteer实现线上服务器任意区域截图

    整个九月份由于业务繁重以及玩心颇重,一直没有机会来写一篇博文.而且笔者于十月一日将会举办人生大事--婚礼,现在家里筹办过程中只能抽出零碎的时间来写这篇文章. 关于服务端截图,这种使用场景非常少见,大多 ...

  7. 【ASP.NET】#001 获取服务器IP

    客户端ip: Request.ServerVariables.Get("Remote_Addr").ToString(); 客户端主机名: Request.ServerVariab ...

  8. [转]Netty入门(最简单的Netty客户端/服务器程序)

    Java中的NIO是一种解决阻塞式IO问题的基本技术,但是NIO的编写对java程序员是有比较高的要求的.那么Netty就是一种简化操作的一个成熟的网络IO编程框架.这里简单介绍一个程序,代码是< ...

  9. gulp一般使用

    gulp的基本使用总结了一下几点: 1.gulp-ejs的使用 [ file include,html文件合并 ]: let ejs = require("gulp-ejs"); ...

  10. gulp的使用以及Gulp新手入门教程

    Gulp新手入门教程 原文  http://w3ctrain.com/2015/12/22/gulp-for-beginners/ Gulp 是一个自动化工具,前端开发者可以使用它来处理常见任务: 搭 ...

随机推荐

  1. 在winform中,禁止combobox随着鼠标一起滑动!

    在winform中,如果form上或者是控件上有一个combobox控件,当你选择这个控件,当你鼠标移动其他地方,滑动鼠标时,这时combobox的选择值就会随之鼠标一起变化,如果你不想让comboB ...

  2. Contest-hunter 暑假送温暖 SRM08

    01-07都没写...然后突然来写貌似有点突兀啊...不管了,难得前排记录一下... 吐槽一下赛制...不得不说很强... cf 套oi...很创新...不过还是兹磁ACM或者CF A-1 数据才2& ...

  3. EF Code-First 学习之旅 级联删除

    级联删除是当删除主记录的时候会自动删除依赖的记录或者设置外键属性为null public class Student { public Student() { } public int Student ...

  4. authentication token manipulation error

    用户服务器中修改密码,输入passwd命令后,报错authentication token manipulation error   发生该错误原因是: 1.分区没有空间导致. 2./etc/pass ...

  5. Java Override和@Override

    Override : 重写. 当子类的某个方法的方法名.返回值.参数列表均与父类的方法保持一致,我们就可以说子类重写了父类的该方法. 其中需要注意: 父类中修饰符为private, static, f ...

  6. RQN 273 马棚问题 dp

    PID273 / 马棚问题  2016-07-29 18:21:55 运行耗时:1624 ms 运行内存:16248 KB 题目描述 每天,小明和他的马外出,然后他们一边跑一边玩耍.当他们结束的时候, ...

  7. 关于VirtualBox在桥接模式下无法联网解决方案

    关于VirtualBox在桥接模式下无法联网 解决方案VirtualBox与笔记本无线网卡桥接 如果重新开机连接不上,可能需要重新共享一下,(重新给桥接网卡分配与当前物理机IP在同一局域网段的IP) ...

  8. Shell 概述、截取字符操作等

    Shell 是用C语言编写的程序,便于用户与Linux内核系统进行交互. Linux的Shell种类众多,常见的有: Bourne Again Shell (/bin/bash) Bourne She ...

  9. ffmpeg的centos、msys2、msvc编译

    msys2 和 centos https://ffmpeg.org/download.html https://ffmpeg.zeranoe.com/builds/ Windows MSYS2准备 1 ...

  10. 如何查看电脑硬盘是gpt分区还是MBR分区

    首先我们右键点击 我的电脑 ,然后在弹出的快捷菜单中我们点击 管理,如下图: 然后在 计算机管理 对话框中,我们可以看到在左侧的存储下有一个 磁盘管理,这里我们点击 磁盘管理,如下图: 点击 磁盘管理 ...