Browsersync：省时的浏览器同步测试工具

Browsersync能让浏览器实时、快速响应您的文件更改（html、js、css、sass、less等）并自动刷新页面。更重要的是 Browsersync可以同时在PC、平板、手机等设备下进项调试。

一 主要特点

（一）交互同步

滚动，点击，刷新等操作可以在不同浏览器之间同步更新。有了它，不用在多个浏览器、多个设备间来回切换，频繁的刷新页面。只需在一个浏览器中滚动页面、点击等行为也会同步到其他浏览器和设备中，这一切还可以通过可视化界面来控制，即可在屏幕上查看多个不同设备对代码修改的效果。

（二）文件同步

   当您改变HTML，CSS，图像和其他项目文件浏览器会自动更新。

（三）URL历史

   记录您的测试网址，您只需点击一次，就可以在不同设备里访问。

（四）记录修改历史

   记录每一次对任何一个文件的修改。

 

二 安装使用

（一）安装 Node.js

    BrowserSync是基于Node.js的, 是一个Node模块，想要使用它，需要先安装一下Node.js

（二）安装 BrowserSync

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

         

npm install -g browser-syn

 

如果npm下载速度过慢，可采取以下方式，安装npm镜像:cnpm。

1).安装cnmp:

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

2.)安装BrowserSync

 

cnpm install -g browser-sync

 

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

（三） 启动 BrowserSync

     全局安装Browsersync后，你可以这样运行它：

             $ browser-sync start <options>

 

Options表示多个不同的命令：

--help 输出使用信息

--version 输出的版本号

--browser 选择哪个浏览器应该是自动打开

--files 文件路径看

--exclude 文件模式忽视

--server 运行本地服务器（使用您的CWD作为Web根）

--index 指定哪些文件应该被用作索引页

--extensions 指定文件扩展名回退

--startPath 指定起始路径，打开浏览器

--https 启用S​​SL地方发展

--directory 显示服务器的目录列表

--proxy 代理现有的服务器

--xip 使用xip.io域路由

--tunnel 使用公共网址

--open 选择哪个URL是自动打开（本地，外部或隧道）

--config 指定为BS-config.js文件的路径

--host 指定主机名使用

--logLevel 设置记录器输出电平（沉默，信息或调试）

--port 指定要使用的端口

--reload-delay 以毫秒为单位的时间延迟重装事件以下文件的变化

--reload-debounce 限制在浏览器中的频率：刷新事件可以被发射到连接的客户机

--ui-port 指定端口的UI使用

--no-notify 禁用浏览器的通知元素

--no-open 不要打开一个新的浏览器窗口

--no-online 强制离线使用

--no-ui 不要启动用户界面

--no-ghost-mode 禁用幽灵模式

--no-inject-changes 刷新上的每个文件更改

--no-reload-on-restart 不要自动重新加载在重新启动所有浏览器

使用方法：

如果希望在对某个文件进行修改后会同步到浏览器里。只需要运行命令行工具，进入到该项目（目录）下，并运行相应的命令：

例如：

// --files 路径是相对于运行该命令的项目（目录）

       $ browser-sync start --server --files "css/*.css"

 

  监听多个类型的文件,只需要用逗号隔开

   // --files 路径是相对于运行该命令的项目（目录）

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

   // 如果你的文件层级比较深，您可以考虑使用 **（表示任意目录）匹配，任意目录下任意.css 或 .html文件。

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

 

在此之前，我们每改一次的代码，都需要手动去刷新一次页面，查看我们的改动是否正确；现在，BrowserSync减少了重复的手工任务，这一切都交给BrowserSync去完成，我们只需专注在业务的逻辑里去。可以在不同的设备及浏览器里进行调试。就连UI都可以运行在浏览器 - 尝试在另一台设备上创建第二页面来控制您的BrowserSync。

通过可视化的操作方式或命令行来创建个性化的测试环境，实现多设备共同响应。