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. 20145120黄玄曦《网络对抗》MSF基础应用

    20145120黄玄曦<网络对抗>MSF基础应用 准备工作 本来决定就是老师提供的XP虚拟机了,做着做着发现因为打补丁以及语言的问题,需要另外的虚拟机. 求来了不那么健壮的虚拟机,环境如下 ...

  2. SpringBoot 加载配置文件

    1.application.properties或application.yaml是SpringBoot默认的配置文件. 可以通过@Value注解 配合 ${......}来读取配置在属性文件中的内容 ...

  3. OSTU二值化算法

    介绍 Ostu方法又名最大类间差方法,通过统计整个图像的直方图特性来实现全局阈值T的自动选取,其算法步骤为: 1) 先计算图像的直方图,即将图像所有的像素点按照0~255共256个bin,统计落在每个 ...

  4. 统计mysql数据库中数据表/字段等数量的sql

    1.查询一个表中有多少个字段: SELECT COUNT(*) FROM information_schema. COLUMNSWHERE table_schema = '数据库名'AND table ...

  5. easyui扩展数据表格点击加号拓展

    $(function(){ $("#RepaymentInfoTab").datagrid({ view: detailview, detailFormatter:function ...

  6. PowerDesigner之SQL表格设计

    设计表格我觉得用PowerDesigner比起在SQL Server中设计表格简单快捷许多. 首先,我们新建一个Model(可以使用快捷键Ctrl + N) 在PowerDesigner中侧边栏有浮动 ...

  7. C++(十七) — 宏代码、内联函数

     1.C++ 表达式返回值 返回引用:当函数返回引用类型时,没有复制返回值.相反,返回的是对象本身.(与之对应的C语言中,返回的是变量的值) C++中,表达式返回的是变量本身(也就是变量对应的地址). ...

  8. 用OpenCV进行视频截取

    记录用OpenCV进行视频截取. 核心代码如下: CvCapture* capture = cvCreateFileCapture(src_avi_file.c_str()); if (capture ...

  9. DDOS SYN Flood攻击、DNS Query Flood, CC攻击简介——ddos攻击打死给钱。限网吧、黄网、博彩,,,好熟悉的感觉有木有

    摘自:https://zhuanlan.zhihu.com/p/22953451 首先我们说说ddos攻击方式,记住一句话,这是一个世界级的难题并没有解决办法只能缓解 DDoS(Distributed ...

  10. [eShopOnContainers 学习系列] - 03 - 在远程 Ubuntu 16.04 上配置开发环境

    直接把 md 粘出来了,博客园的富文本编辑器换成 markdown,没啥效果呀 ,先凑合吧.实在不行换地方   # 在远程 Ubuntu 16.04 上配置开发环境 ## 零.因 为什么要用这么麻烦的 ...