browser-sync可以同时在PC、平板、手机等设备下进项调试，更改文件（html、js、css、sass、less等）保存后自动刷新浏览器页面，有了它，您不用在多个浏览器、多个设备间来回切换，频繁的F5刷新页面。更神奇的是您在一个浏览器中滚动页面、点击等行为也会同步到其他浏览器和设备中。

browser-sync主要分为2种应用场景：

1、静态网站：本地没有搭建服务器环境(如:没有使用wamp搭建php服务器或类似的服务器环境)，此时应使用使用browser-sync自带的服务器模式，命令格式为：browser-sync start --server  ;

2、动态网站：本地有搭建服务器环境(如:有使用wamp搭建php服务器或类似的服务器环境)，此时应使用使用browser-sync的代理模式，命令格式为：browser-sync start --proxy  "本机ip/本机虚拟主机域名" .

运行browser-sync也分为2种方式：

1、命令行browser-sync start+选项配置，如：browser-sync start --server --files "*.html,**/*.css" ;

2、命令行browser-sync start+bs-config.js ，如：  browser-sync start --config bs-config.js （bs-config.js 可通过执行browser-sync init 命令自动生成 ），bs-config.js文件可加入上面方式1里面的所有选项配置 （强烈推荐使用这种方式：不同测试项目只需拷贝bs-config.js文件，放至根目录下，再编辑该js配置文件，就可使用比较简短的命令行browser-sync start --config bs-config.js 运行browser-sync 啦！）

需要特别注意的是：

1、不管是哪种应用场景或运行方式，在cmd下执行browser-sync命令行前,都必须先进入到项目目录文件夹里面，如：项目在D盘 test目录下，我们必须先执行下面命令：

cd  d:\test
d:

然后再执行browser-sync 命令

2、运行成功的界面是怎样的？如下图：

注意看红框部分， 只有显示 watching file...  和 更新保存文件时 有提示 Reloading Browsers....  才表示browser-sync运行成功！

3、运行browser-sync，浏览器预览地址分为2种,如上截图所示，解释：

local: 以 localhost+端口号组合而成

External：以本机ip/本机虚拟主机域名+端口号组合而成

• 默认是使用local地址打开，可通过配置选项 --open external  改成使用External地址打开
• 如果想在本机搭建的虚拟主机域名基础上加入端口号来实现页面实时预览，除了要“设置--proxy  本机虚拟主机域名”外，还必须设置：“ --host+本机虚拟主机域名” 来代替browser-sync默认的“本机ip+端口号”的External预览地址

4、使用browser-sync时，可监视文件，也可监视指定的某文件夹内所有文件，如：

监视静态网站根目录下的所有html文件和source/src/css/目录下所有css文件，我们可以这样写:

browser-sync start --server  --files "*.html,**/css/*.css"

监视动态网站（proxy代理模式）根目录下source目录下所有文件，我们可以这样写：

browser-sync start --proxy 192.168.2.105 --files "source"

但要特别注意的是，配置选项 --files 都是必须的！

browser-sync详细用法可直接查看：browser-sync官网 ，如果英文阅读吃力，可查看browser-sync中文网