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. jQuery多级联动美化版Select下拉框

    在线演示 本地下载

  2. 20162326 齐力锋 2017-2018学期 Bag类的补写博客

    要求: 代码运行在命令行中,路径要体现学号信息,IDEA中,伪代码要体现个人学号信息 参见Bag的UML图,用Java继承BagInterface实现泛型类Bag,并对方法进行单元测试(JUnit), ...

  3. NOIP 马拦过河卒

    描述 棋盘上A点有一个过河卒,需要走到目标B点.卒行走的规则:可以向下.或者向右.同时在棋盘上C点有一个对方的马,该马所在的点和所有跳跃一步可达的点称为对方马的控制点.因此称之为“马拦过河卒”. 棋盘 ...

  4. sqlmap的简要使用方法

    仅作为备忘!!! sqlmap使用: 注入类型有四种分别为:boolean-based blind.error-based.stacked queries.inline query. sqlmap - ...

  5. Spring Boot 中配置切换

    步骤一:切换需求 有时候在本地测试是使用8080端口(默认端口),可是上线时使用的比如是9090端口(不常用的,以防被黑). 此时就可以通过多配置文件实现多配置支持与灵活切换. 步骤二:多配置文件 3 ...

  6. oracle 10g和11g将表到缓存到内存中

    alter table 表名 cache;alter table 表名 storage(buffer_pool keep);

  7. Pandas稀疏数据

    当任何匹配特定值的数据(NaN/缺失值,尽管可以选择任何值)被省略时,稀疏对象被“压缩”. 一个特殊的SparseIndex对象跟踪数据被“稀疏”的地方. 这将在一个例子中更有意义. 所有的标准Pan ...

  8. scala学习手记29 - 偏应用函数

    调用函数可以说成是将函数应用于实参.如果传入所有的预期的参数,就完全应用了这个函数.如果只传入几个参数,就会得到一个偏应用函数. 偏应用函数是一个特殊的概念,在scala中它是使用val定义的,但是在 ...

  9. LeetCode OJ:Pow(x, n) (幂运算)

    Implement pow(x, n). 幂运算,简单的方法snag然很好实现,直接循环相乘就可以了,但是这里应该不是那种那么简单,我的做法使用到了一点递归: class Solution { pub ...

  10. OC-Foundation框架

    ========================== Foundation框架下的常用类 ========================== 一.[NSNumber]================ ...