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

 阅读约 7 分钟

本文同步自我的博客 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启动的时候会自动启动自带的静态的服务器,通过这个服务器来访问网页,可以看到这个提示:
reeoo.co
也正式因为这个静态的服务器的存在,BrowserSync不需要安装任何的浏览器插件,就可以处理项目文件,不像livereload,必须要安装浏览器插件,强烈建议使用livereload的伙伴,放弃它,拥抱BrowserSync吧~

基本原理

当网页已连接到BrowserSync的时候,我们可以查看一下源码,会发现它们都被添加了与BrowserSync有关的一段<script>代码,就像liveReload浏览器插件做的那样。这些代码会在浏览器和BrowserSync的服务器之间建立web socket连接,一旦有监听的文件发生变化,BrowserSync会通知浏览器。

如果发生变化的文件是cssBrowserSync不会刷新整页,而是直接重新请求这个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会在打开你当前网页的所有浏览器中同步滚动条位置,表单行为和点击事件。有关表单行为的情形大概像酱紫:
reeoo.co

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

UI界面

BrowserSync自带一个UI控制面板,UI控制面板的地址跟静态服务器的地址一样,只是端口号比静态服务器的端口号大1(默认情况下,是这样),大概看一下UI控制面板的样子:
reeoo.co
在上面这个图里面有这么一个东西:
reeoo.co
从上到下依次是控制按钮的点击、窗口的滚动、表单的提交、表单输入域的输入、单选多选按钮的Check是否开启同步的开关,如果不想开启这些功能的同步,可以直接把前面的开关关掉,就不会再收到别人的影响了。
这个UI控制面板里面还有一些其它的东西,就不一一列表了,有兴趣的同学,可以自己折腾一下~

总结

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

阅读 6.5k更新于 2015-12-28
推荐阅读
Reeoo's Page
用户专栏

Reeoo's Page

8 人关注
5 篇文章
专栏主页
目录