介绍

首先这是一个效率工具，Browsersync能让浏览器实时、快速响应您的文件更改（html、js、css、sass、less等）并自动刷新页面。更重要的是 Browsersync可以同时在PC、平板、手机等设备下进项调试。说的通俗一点就是让你在改完代码后，页面能够实时刷新，无论是前端还是后端工程师，使用它将提高您30%的工作效率。有了它，不用在多个浏览器、多个设备间来回切换，频繁的刷新页面。更神奇的是在一个浏览器中滚动页面、点击等行为也会同步到其他浏览器和设备中，这一切还可以通过可视化界面来控制。

看下面效果图:

Github

https://github.com/BrowserSync/browser-sync

为什么使用它？

• 大大的简化了整个测试流程

不需要在每个页面进行手动刷新，现在，BrowserSync减少了重复的手工任务，这一切都交给BrowserSync去完成，我们只需专注在业务的逻辑里去。

• 多端支持

BrowserSync是建立在网络技术上的，您可以轻松安装在OS X，Windows或Linux上，然后在不同的设备及浏览器里进行调试。

• 个性化测试环境

通过可视化的操作方式或命令行来创建个性化的测试环境，多设备共同响应。BrowserSync很容易与您的网络平台集成，构建工具和其他Node项目中，例如gulp、grunt。

功能介绍

• 同步的交互体验

滚动，点击，刷新等操作可以在不同浏览器之间同步更新。

• 文件同步

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

• 历史URL

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

• 同步定制

切换各个同步设置创建您的首选测试环境。

• 远程监测

远程调整和正在对连接的设备运行调试网页。

• URL访问通道

创建一个安全的公共URL分享您的本地站点，任何设备都可以访问它，并可以响应您的任何改动。

• 可视化和命令行控制

使用可视化页面来进行相关设置，也可以使用命令行来完成。

• 多端及浏览器支持

支持PC，平板电脑和手机之间的即时同步。各种文件及时响应，堪称完美。

• 构建工具兼容

可轻松与grunt、gulp等工具配合使用，或包含在其它node项目里。

• 服务于任何本地站点

可以在PHP，ASP，Rails和更多网站运行使用。也可以创建静态环境。

• 安装并运行在任何地方

基于Node.js并支持Windows，MacOS和Linux操作系统，设置只需要5分钟。

• 许可协议

可根据Apache2.0许可使用或更改。

支持的浏览器

Chrome浏览器、火狐、IE8 +、Safari浏览器、Opera、Android、黑莓、Firefox移动端、iOS、Opera移动移动端、Windows Phone。

快速入门

• NODEJS安装

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

• 安装

npm install -g browser-sync

• 启动

1、静态网站

如果你只想在改变某一个css文件后同步，那么可以这样：

// --files 路径是相对于运行该命令的项目（目录） 
browser-sync start --server --files "css/*.css"

如果需要监听多个类型的文件，只需要用逗号隔开。例如我们再加入一个.html文件

// --files 路径是相对于运行该命令的项目（目录） 
browser-sync start --server --files "css/*.css, *.html"
// 如果你的文件层级比较深，您可以考虑使用 **（表示任意目录）匹配，任意目录下任意.css 或 .html文件。 
browser-sync start --server --files "**/*.css, **/*.html"

2、动态网站

在动态网站中，browser-sync是通过代理来实现的

// 主机名可以是ip或域名
browser-sync start --proxy "主机名" "css/*.css"

说明文档

browsersync的使用有一个详细的文档，而且开源在Github上，上面已经给出地址：

总结

对于一个前后端开发者来说browsersync真的是太有用了，提升工作效率不仅仅是说说，而且可以减少强迫症的的发生，感兴趣的小伙伴可以尝试下，如果你有更好的建议或者想法，可以到评论区留言分享！