软件系统
BrowserSync高效率的前端开发浏览器同步测试工具
之前在前端开发时，修改了html、js、css等文件想要查看效果，都必须刷新浏览器，而这个过程浪费很多时间。BrowserSync，一个高效率的前端开发浏览器同步测试工具，能让浏览器实时、快速响应您的文件更改（html、js、css、sass、less等）并自动刷新页面。无论您是前端还是后端工程师，使用它将提高您30%的工作效率。
有了它，您不用在多个浏览器间来回切换，频繁的刷新页面。更神奇的是您在一个浏览器中滚动页面、点击等行为也会同步到其他浏览器中，这一切都可以通过可视化界面来控制。
BrowserSync的安装步骤：
一、安装 Node.js
BrowserSync是基于Node.js的, 是一个Node模块， 如果您想要快速使用它，也许您需要先安装一下Node.js。
进入Node.js官网下载与系统相符的版本，进行安装即可，安装适用于Mac OS，Windows和Linux。
二、 安装 BrowserSync
您可以选择从Node.js的包管理（NPM）库中 安装BrowserSync。打开一个终端窗口，运行以下命令：
- npm install -g browser-sync
您告诉包管理器下载BrowserSync文件，并在全局下安装它们，您可以在所有项目中使用。
当然您也可以只在某个项目里使用，运行下面的命令：
- npm install --save-dev browser-sync
三、启动 BrowserSync
一个基本用途是，如果您只希望在css目录里对CSS文件进行修改后并同步到浏览器里。那么您只需要，在某个项目里打开终端窗口，并运行相应的命令：
静态网站
如果您只使用.html文件, 您需要使用服务器模式。 BrowserSync 将启动一个小型服务器，并提供一个URL来查看您的网站。
- browser-sync start --server --files "css/*.css"
动态网站
如果您已经在运行的本地服务器PHP或类似的，您需要使用代理模式。 BrowserSync 将包裹您的虚拟主机与代理URL来查看您的网站。
- browser-sync start --proxy "myproject.dev" --files "css/*.css"
针对Wordpress主题如何启用BrowserSync
使用以上两种方法都没有启用成功，之后就找到BrowserSync中文网的站长，通过与他的交流，测试了一两个小时，最后才得到如果解决方法：
首先萨龙龙本地的PHP环境是用wamp搭建的，安装在D盘的根目录下，如有不同请修改。
1、在npm中输入：d:，进入到D盘
2、再输入：cd wamp/www/wordpress，进入WP目录
3、再输入：browser-sync start --proxy "localhost/wordpress" --files "wp-content/themes/**/*.css"，启用BrowserSync
这样我们就可以正确地监听主题目录下的文件的修改。
本文部分内容来源BrowserSync中文网，更多内容也请前往访问。
在前端开发过程中使用BrowserSync，确实能节省不少时间，大量提高前端开发的效率，大赞！
本文由 远方的雪山 作者：萨龙龙 发表，转载请注明来源！
萨龙龙
文章：290 画廊：33 视频：37一个平平常常的人，热爱生活、旅行和摄影，骑行去过西藏，一直计划再去。14年从江西骑行来到大理，现栖居于洱海边，食人间烟火，过简单生活，做简约设计！
相关文章
我从Yoman下载的webApp开发前端，我使用grunt serve后brwersync会启一个loalhost默认端口为3000的页面，但是做到数据部分的时候，我需要提交数据到后台，而异步中的url(user/add)写入的相对地址，这样提交报错，其实是没有这个接口的，我需要怎么设置才能正确提交数据呢？
这个我不是很了解，你可以到BrowserSync中文网看看或者加103934224 QQ群，群主会很乐意帮你解答。
如果我是在阿里云上呢 –proxy “localhost/wordpress” 这里参数怎么写？
修改localhost/wordpress这个为你服务器上wordpress安装的目录就可以
这是什么浏览器，开发不是用火狐么
这是个工具，在前端开发中不刷新而同步浏览器的工具！
这个工具不错 感谢分享
是的，做前端开发太实用了