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，能节约一点时间是一点时间，时间长了，单身狗就能够腾出手来去约妹子啦~啦啦啦~