browser-sync前端自动刷新，释放你的F5

1、前言

browser-sync的基本原理：首先他会启动一个本地服务，但是如果你已经有一个本地服务，你可以将BrowserSync当做代理；BrowserSync 会在每个页面添加一段 JavaScript 代码，这个文件会利用WebSockets和本地服务之间交互，客户端随时关注代码的变化和浏览器的行为。

网页首先在本地服务中，浏览器的中网页被BrowserSync添加一个特殊的JavaScript文件，它可以利用WebSockets和本地服务之间通信，本地服务中的变化能及时的传递到浏览器。

2、功能

browser-sync能够监听项目路径的下的文件变化，我自己测试的结果是项目下修改css和js文件可以侵入到当前页面下的css和js文件，从而实现无感知刷新；jsp页面的话是有感知的刷新，相当于我们自己去按F5刷新，还有一个我自己觉得更强大的功能是可以调试手机端，使用它后只需要用它开启的代理服务器用手机去访问，例如 [External: http://192.168.28.108:3000](External: http://192.168.28.108:3000) 这个ip地址，就可以实现一边编码一边看效果的功能，大大提高手机端的开发效率。

3、本地安装

browser-sync是基于node.js开发的一个npm包，所以先在本地安装好node.js。node.js也有像linux那样的命令行脚本，建议用git-bash，当然你用cmd也可以。

3.1、安装browser-sync

1、先确保node.js安装成功了

Paste_Image.png

2、使用淘宝镜像cnpm，下载npm包会快很多

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

3、正式全局安装browser-sync

cnpm install -g browser-sync

如果安装完，输入如下命令的显示就代表安装成功了。

Paste_Image.png

4、启用代理模式监听项目的文件，规则如下：

browser-sync start --proxy "主机名" --files "路径"

主机名就是我们要监听的网站的域名，如 www.wjq123.iii.cc.wjq.dev.cc/ ,路径的话注意不要监听文件夹，我的测试结果是会报错的。监听文件夹的bug去作者的github那里提issue了，建议监听多个文件时，还是用逗号隔开的形式。用图片如下：

Paste_Image.png

如果是pc端的网站的话直接访问 Local 的域名，手机的端访问 External 的域名，下面那两个是browser-sync提高的可视化的配置页（可以不用管）。当你的文件出现变化的时候，命令行会提示如下：

 File changed:+路径名

4、示例

1、开启：

Paste_Image.png

2、实时编码展示：

实时展示.gif

5、后记

如果知道这个bug怎么解决的可以和我交流下，地址如下：https://github.com/BrowserSync/browser-sync/issues/1323