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有关的一段<script>代码，就像liveReload浏览器插件做的那样。这些代码会在浏览器和BrowserSync的服务器之间建立web socket连接，一旦有监听的文件发生变化，BrowserSync会通知浏览器。

如果发生变化的文件是css，BrowserSync不会刷新整页，而是直接重新请求这个css文件，并更新到当前页中。

多文件监听

BrowserSync通过--files指定需要监听的文件,在做项目的时候，我们不可能之监听一种文件，那样效率会很低，如果想同时监听整个项目文件的变化，那么可以使用下面的命令：

  $ browser-sync start --server  --files "**"

**代表监听当前目录下的所有文件的变化，我们只需要在项目根目录开启BrowserSync即可监听整个项目，当然，BrowserSync仍然会正确地判断文件变化是否是css。

整合到Gulp构建流程中

Gulp是现在前端比较流行的自动化构建工具了（具体的用法可以看我的另一片文章，Gulp简易入坑），Gulp基于插件来做构建，但是BrowserSync并没有提供Gulp的插件版本，即使是这样，我们也可以在Gulp环境中来使用它，只需要把BrowserSync作为node的一个模块require进来，就可以调用其相关的API：下面是一段gulpfile.js的示例：

var gulp = require('gulp');
var BrowserSync = require('browser-sync');//引入模块

gulp.task('browser-sync', function() {//注册任务
    BrowserSync({//调用API
        files: "**",//监听整个项目
        server: {
            baseDir: "./"监听当前路径
        }
    });
});

gulp.task('default', ["browser-sync"]);

然后在命令行中运行Gulp这个任务，即可实现和browser-sync start --server --files "**"一样的功能。

高级用法

在控制台里尝试输入：

  $ browser-sync init

回车，然后你会发现，当前目录多了一个bs-config.js文件，这个是BrowserSync的配置文件。有关BrowserSync的所有运行配置都在这个里面，我们可以参考官方给出的文档进行修改，然后以这个配置文件来运行BrowserSync：

  $ browser-sync start --config bs-config .js

除了自动刷新，还有啥

第一次使用BrowserSync的时候，链接上BrowserSync的服务器之后就把页面发给了UI设计师，让他们去做UI验收工作，他们走后，我发现我的网页会莫名奇妙的自动上下滚动，还有一些按钮被自动点击，很诡异，后来发下，这原来也是BrowserSync捣的鬼，
BrowserSync除了自动刷新，默认配置下，BrowserSync会在打开你当前网页的所有浏览器中同步滚动条位置，表单行为和点击事件。有关表单行为的情形大概像酱紫：

这虽然是一个很酷的功能，BUT，有时候会影响我们自己的操作，如果你不像被影响，可以把这个功能关掉。怎么关呢，请继续往下看咯~

UI界面

BrowserSync自带一个UI控制面板，UI控制面板的地址跟静态服务器的地址一样，只是端口号比静态服务器的端口号大1(默认情况下，是这样)，大概看一下UI控制面板的样子：

在上面这个图里面有这么一个东西：

从上到下依次是控制按钮的点击、窗口的滚动、表单的提交、表单输入域的输入、单选多选按钮的Check是否开启同步的开关，如果不想开启这些功能的同步，可以直接把前面的开关关掉，就不会再收到别人的影响了。
这个UI控制面板里面还有一些其它的东西，就不一一列表了，有兴趣的同学，可以自己折腾一下~

总结

所谓工欲善其事必先利其器，有了BrowserSync，能节约一点时间是一点时间，时间长了，单身狗就可以腾出手来去约妹子啦~啦啦啦~