介绍
首先这是一个效率工具，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真的是太有用了，提升工作效率不仅仅是说说，而且可以减少强迫症的的发生，感兴趣的小伙伴可以尝试下，如果你有更好的建议或者想法，可以到评论区留言分享！
本文来自投稿，不代表本人立场，如若转载，请注明出处：http://www.souzhinan.com/kj/69551.html