浏览器同步测试神器 — BrowserSync

Browsersync 能让浏览器实时、快速响应文件更改（html、js、css、sass、less等）并自动刷新页面。更重要的是 Browsersync能够同时在PC、平板、手机等设备下进项调试，当使用browsersync后，任何一次代码保存，以上的设备都会同时响应文件的改动。效果以下：

（图片来自：http://www.browsersync.cn/ ）

 

如何使用？

一、安装Node.js

BrowserSync是基于Node.js的, 是一个Node模块，Node.js能够从官网下载，当前最新版本6.2.0，稳定版本4.4.4，建议下载最新版，下载后直接安装便可。

下载地址： http://nodejs.cn/

二、安装 BrowserSync

在终端窗口中运行如下命令（全局安装以便在全部的项目中都能使用）：

npm install -g browser-sync

若配合gulp或grunt等构建工具使用，则能够在须要构建的项目里面安装：

npm install --save-dev browser-sync

三、启动 Browser-Sync

静态网站

假如须要监听 .css 文件，则在终端输入以下命令便可（Browser-sync 会启动一个小型服务器，并提供一个 url 来查看网站）：

// --files 路径是相对于运行该命令的项目（目录） 
browser-sync start --server --files "css/*.css"

若须要监听多个类型的文件，用逗号隔开便可：

// --files 路径是相对于运行该命令的项目（目录） 
browser-sync start --server --files "css/*.css, *.html"
// 若是文件层级比较深，您能够考虑使用 **（表示任意目录）匹配，任意目录下任意.css 或 .html文件。 
browser-sync start --server --files "**/*.css, **/*.html"

动态网站

若是要在本地服务器下监听文件变化，则须要使用代理模式，BrowserSync 将经过代理 URL(localhost:3000) 来查看网站。

// 主机名能够是ip或域名
browser-sync start --proxy "主机名" "css/*.css"

运行效果以下：

 

和LiveReload比较

LiveReload 须要搭配浏览器插件。Chrome和Firefox都有可用插件，但在IE或者手机浏览器没有对应的插件。

BrowserSync 则不须要浏览器插件，一句简单的控制台命令以后，不管是在手机仍是电脑，不管用多少个浏览器，均可以拥有自动刷新的功能。

 

为何BrowserSync不须要浏览器插件？

由于它使用了服务器的形式（直接或代理）来处理项目文件。默认状况下，访问它的服务器上的网页，能够看到这样的提示签：

这说明当前浏览的网页已链接到BrowserSync。查看一下源码，会发现它们都被添加了与BrowserSync有关的一段 <script> 代码，就像LiveReload浏览器插件作的那样。这些代码会在浏览器和BrowserSync的服务器之间创建web socket链接，一旦有监听的文件发生变化，BrowserSync会通知浏览器。

 

单页应用？

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

若是你正在开发的是一个单页应用，刷新整页会回到初始视图，而你又须要修改后面的某一个视图时，这一功能尤为有用。

 

在Gulp中使用 BrowserSync

Gulp是如今流行的自动化工具，但BrowserSync并无Gulp插件版，由于并不须要。BrowserSync有本身独立的API，将它注册为gulp的一个task便可。以下：

var gulp = require('gulp');
var browserSync = require('browser-sync');
gulp.task('browser-sync', function() {
    browserSync({
        files: "**",
        server: {
            baseDir: "./"
        }
    });
});
gulp.task('default', ["browser-sync"]);

 这时候运行 gulp 将等同于前文的 browser-sync start --server --files "**"  。

 

参考资料

http://www.browsersync.cn/

http://www.tuicool.com/articles/vUriay