BrowserSync — 你值得拥有的前端同步测试工具

本文同步自我的博客 Reeoo's Blog，欢迎移步前往，^_^

BrowserSync是一个同步多浏览器页面测试工具。有了它，你在IDE里面修改完文件，页面就会同步刷新，你再也不需要手动去按F5刷新啦~

适用场景

在做Hybrid项目的时候，因为测试需要，桌子上可能会同时放几台测试机，同时进行兼容性测试，再加上PC电脑，一堆设备摆在你的面前，你每在IDE改一个东西，就要去挨个设备刷新网页，这不是很low吗？在人类文明高度发达的今天，这种事情怎么能忍呢？
这时候，BrowserSync就应该登场了，只要所有链接到BrowserSync的网页，对应的源码被修改，并保存，那么，这些网页就会被自动刷新，再也不需要你一个一个刷新了。

1分钟上手

1. 安装nodeJs

2. 安装BrowserSync

   $ npm install -g browser-sync

3. 启动BrowserSync

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

   这个命令后面的--files "css/*.css"是指监听css目录中的后缀名为.css的文件。请注意这个命令里的start --server，这其实是BrowserSync自己启动了一个小型静态服务器。

OK,是不是真的只需要一分钟（被墙的时间除外哦~）？，你的BrowserSync就欢快的跑起来了，BrowserSync启动的时候会自动启动自带的静态的服务器,通过这个服务器来访问网页，可以看到这个提示：

也正式因为这个静态的服务器的存在，BrowserSync不需要安装任何的浏览器插件，就可以处理项目文件，不像livereload，必须要安装浏览器插件，强烈建议使用livereload的伙伴，放弃它，拥抱BrowserSync吧~

基本原理

当网页已连接到BrowserSync的时候，我们可以查看一下源码，会发现它们都被添加了与BrowserSync有关的一段