BrowserSync高效率的前端开发浏览器同步测试工具

之前在前端开发时，修改了html、js、css等文件想要查看效果，都必须刷新浏览器，而这个过程浪费很多时间。BrowserSync，一个高效率的前端开发浏览器同步测试工具，能让浏览器实时、快速响应您的文件更改（html、js、css、sass、less等）并自动刷新页面。无论您是前端还是后端工程师，使用它将提高您30%的工作效率。

有了它，您不用在多个浏览器间来回切换，频繁的刷新页面。更神奇的是您在一个浏览器中滚动页面、点击等行为也会同步到其他浏览器中，这一切都可以通过可视化界面来控制。

BrowserSync是基于Node.js的, 是一个Node模块， 如果您想要快速使用它，也许您需要先安装一下Node.js。

进入Node.js官网下载与系统相符的版本，进行安装即可，安装适用于Mac OS，Windows和Linux。

二、 安装 BrowserSync

您可以选择从Node.js的包管理（NPM）库中 安装BrowserSync。打开一个终端窗口，运行以下命令：

您告诉包管理器下载BrowserSync文件，并在全局下安装它们，您可以在所有项目中使用。

当然您也可以只在某个项目里使用，运行下面的命令：

三、启动 BrowserSync

一个基本用途是，如果您只希望在css目录里对CSS文件进行修改后并同步到浏览器里。那么您只需要，在某个项目里打开终端窗口，并运行相应的命令：

静态网站

如果您只使用.html文件, 您需要使用服务器模式。 BrowserSync 将启动一个小型服务器，并提供一个URL来查看您的网站。

动态网站

如果您已经在运行的本地服务器PHP或类似的，您需要使用代理模式。 BrowserSync 将包裹您的虚拟主机与代理URL来查看您的网站。

针对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中文网，更多内容也请前往访问。