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单选框跟复选框美化

    在线演示 本地下载

  2. pycharm中创建并设置docker解释器

    在Windows上使用Docker的其中一个目的是使其与PyCharm结合,形成Python代码的解释器,避免重复的Python解释环境搭建的问题,同时保持Windows开发环境和部署环境所用的Pyt ...

  3. 2062326 齐力锋 实验四《Java面向对象程序设计Android开发》实验报告

    北京电子科技学院(BESTI) 实 验 报 告 课程: 程序设计与数据结构  班级: 1623  姓名: 齐力锋 学号: 20162326 成绩: 指导教师: 娄嘉鹏/王志强 实验日期: 2017年5 ...

  4. Action Results in Web API 2

    https://docs.microsoft.com/en-us/aspnet/web-api/overview/getting-started-with-aspnet-web-api/action- ...

  5. 关于C/C++中main函数参数的学习

    因为面对对象作业(2018.5.21)的要求,去学习了C/C++中main函数参数的意义,以及一些简单的使用(从命令行指令的接受),不给予赘述.(仅为个人拙见,还望看官指正) 首先,带有参数的main ...

  6. ScrollView嵌套使用ListView冲突的解决与分析

    因为ScrollView与ListView都是具有滚动条的控件,所以嵌套在一起使用的时候可能会出现事件的冲突,比如我就遇见了ListView中只显示一条数据的问题.解决的办法,就是自定义了一个List ...

  7. geoserver源码学习与扩展——CSV转shapefile文件

    基于geotools实现csv转换为shapefile文件. 1.读取CSV文件,将其装入FeatureCollection: 2.利用ShapefileDumper类将FeatureCollecti ...

  8. java 处理emoji表情信息转换为String

    2种方式实现: 注意:如果发现运行时java.lang.NoClassDefFoundError:异常就是缺少了jar包.添加对应的jar包就可以. 一.emoji-java-4.0.0.jar实现 ...

  9. Android并发编程之白话文详解Future,FutureTask和Callable

    从最简单的说起Thread和Runnable 说到并发编程,就一定是多个线程并发执行任务.那么并发编程的基础是什么呢?没错那就是Thread了.一个Thread可以执行一个Runnable类型的对象. ...

  10. java中HashMap、HashTable、TreeMap的区别总结【表格对比清楚明了】

      底层 有序否 键值对能否为Null 遍历 线程安全 哈希Code Hashmap 数组+链表 无序 都可null iterator 不安全 内部hash方法 Hashtable 数组+链表 无序 ...