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. 20145109《Java程序设计》第一周学习总结

    20145109 <Java程序设计>第一周学习总结 教材学习内容总结 About JVM, JRE, JDK JVM包含于JRE中,用于运行Java程序.JDK用于开发Java程序,包含 ...

  2. Python引用多个模块,调用模块中的函数时,要注意的地方

    转自:http://blog.csdn.net/yjk13703623757/article/details/70237463 python模块是”从下到上”导入(import)的. 例如: a.py ...

  3. adplayer移植【转】

    本文转载自:https://blog.csdn.net/qq361294382/article/details/50525412 这两天做madplayer移植,由于是刚装的ubuntu14.04,所 ...

  4. minicom退出方法【转】

    本文转载自:https://blog.csdn.net/jhyworkspace/article/details/53572284 1)需使用Ctrl+a 进入设置状态2)按z进入设置菜单(1)S键: ...

  5. 如何实现一个简单的RPC

    在如何给老婆解释什么是RPC中,我们讨论了RPC的实现思路. 那么这一次,就让我们通过代码来实现一个简单的RPC吧! RPC的实现原理 正如上一讲所说,RPC主要是为了解决的两个问题: 解决分布式系统 ...

  6. Spring注解(AOP)

    底层动态代理 程序运行期间动态的将某段代码切入到指定方法指定位置进行运行的编程方式 导入aop的相关模块 <!-- https://mvnrepository.com/artifact/org. ...

  7. 【转】和菜鸟一起学linux之DBUS基础学习记录

    [原文] D-Bus三层架构 D-Bus是一个为应用程序间通信的消息总线系统, 用于进程之间的通信.它是个3层架构的IPC 系统,包括: 1.函数库libdbus ,用于两个应用程序互相联系和交互消息 ...

  8. 一种根据value解释成枚举的有效方法

    有时候需要根据实际情况将某个值解释成一个枚举,而不是根据枚举的名称.如有时0是枚举Gender.MALE的值,1是枚举Gender.FEMALE的值:有时0.1又可以是另一个枚举的值,比如0表示Cer ...

  9. chrome跨域拓展工具

    下载chrome跨域扩展工具 1) http://crx.2333.me/ 扩展程序id:nlfbmbojpeacfghkpbjhddihlkkiljbi

  10. 解决:夜神模拟器连不上adb的问题

    一. adb devices发现不了设备 刚试了一下,在夜神模拟器开启的情况下,adb devices 死活找不到设备 adb kill-server和adb start-server也无济于事 二. ...