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. new与getInstance

    getInstance 多在单例模式下使用,即一个类只有一个实例,即全局类对象,该对象创建后在内存中保留对他的引用,以便多次调用,每次调用都返回同一个对象. getInstance是少部分类才有的一个 ...

  2. CentOS 7如何将.deb文件转换.rpm

    1.首先下载alien工具 http://ftp.de.debian.org/debian/pool/main/a/alien/  http://ftp.de.debian.org/debian/po ...

  3. 20145201《Java程序设计》第五次实验报告

    实验五 Java网络编程及安全 实验内容 1.掌握Socket程序的编写: 2.掌握密码技术的使用: 3.设计安全传输系统. 我负责客户端 组队队员:鄢曼君20145227负责服务器 博客地址:htt ...

  4. Spring_通过注解配置 Bean(2)

  5. NO.2 You must restart adb and Eclipse多种情形分析与解决方案

    一.问题描述:     运行android程序控制台输出     The connection to adb is down, and a severe error has occured.      ...

  6. Prims算法 - 最小生成树

    2017-07-26  14:35:49 Prims算法,是一种基于“贪心”的求最小树的算法 ,以每次加入一个邻接边来建立最小树,直到找到N-1个边为止. 规则:以开始时生成树的集合为起始的顶点,然后 ...

  7. ubuntu 支持中文

    1.cat /usr/share/i18n/SUPPORTED 说明:查看系统支持的字符集,你需要注意的是支持字符集的格式,如对中文会有以下一些显示(我的系统如此,我不知是否普遍) zh_CN.GB1 ...

  8. JavaScript面向对象之Prototypes和继承

    本文翻译自微软的牛人Scott Allen Prototypes and Inheritance in JavaScript ,本文对到底什么是Prototype和为什么通过Prototype能实现继 ...

  9. go语言的一个简单httpserver

    httpserver.go package main import ( "net/http" "flag" "fmt" "log& ...

  10. 六 web爬虫讲解2—urllib库爬虫—基础使用—超时设置—自动模拟http请求

    利用python系统自带的urllib库写简单爬虫 urlopen()获取一个URL的html源码read()读出html源码内容decode("utf-8")将字节转化成字符串 ...