Browsersync-省时的浏览器同步测试工具

基本使用

1. 安装 Node.js

BrowserSync是基于Node.js的, 是一个Node模块，如果您想要快速使用它，需要先安装一下Node.js
安装适用于Mac OS，Windows和Linux。

2. 安装 BrowserSync

您可以选择从Node.js的包管理（NPM）库中安装BrowserSync。打开一个终端窗口，运行以下命令：

npm install -g browser-sync
上面的是在全局下安装它们，这样你就可以在所有项目(任何目录)中使用。

当然您也可以结合gulpjs或gruntjs构建工具来使用，在您需要构建的项目里运行下面的命令:

npm install –save-dev browser-sync

3. 启动 BrowserSync

一个基本用途是，如果您只希望在对某个css文件进行修改后会同步到浏览器里。那么您只需要运行命令行工具，进入到该项目（目录）下，并运行相应的命令：

静态网站

如果您想要监听.css文件, 您需要使用服务器模式。 BrowserSync 将启动一个小型服务器，并提供一个URL来查看您的网站。

// --files 路径是相对于运行该命令的项目（目录）
browser-sync start --server --files "css/*.css"
如果您需要监听多个类型的文件，您只需要用逗号隔开。例如我们再加入一个.html文件

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

不能是中文路径。打开您的命令行工具，进入到BrowsersyncExample目录下，运行以下其中一条命令。Browsersync将创建一个本地服务器并自动打开你的浏览器后访问http://localhost:3000地址，这一切都会在命令行工具里显示。

// 监听css文件
browser-sync start --server --files "css/*.css"
// 监听css和html文件
browser-sync start --server --files "css/*.css, *.html"

动态网站

如果您已经有其他本地服务器环境PHP或类似的，您需要使用代理模式。 BrowserSync将通过代理URL(localhost:3000)来查看您的网站。

1 2	// 主机名可以是ip或域名 browser-sync start --proxy "主机名" "css/*.css"

在本地创建了一个PHP服务器环境，并通过绑定Browsersync.cn来访问本地服务器，使用以下命令方式，Browsersync将提供一个新的地址localhost:3000来访问Browsersync.cn，并监听其css目录下的所有css文件。

1	browser-sync start --proxy "Browsersync.cn" "css/*.css"

API

你可以用它来创建简单的开发任务或与其他工具配合使用完成复杂的任务。你要使用它，只需要 require Browsersync 模块，就像使用其他模块那样。以下是常用方法的详细说明：

在 2.0.0 版本之前
直接引用Browsersync模块后即可使用：

// 引用 browserSync 模块
var browserSync = require("browser-sync");

// 启动服务器
browserSync({server: "./app"});

// 调用reload方法
browserSync.reload("core.css");

在2.0.0+版本（推荐）
虽然上述方式依然支持，但现在我们推荐以下方式代替。调用 .create() 意味着你得到一个唯一的实例并允许您创建多个服务器或代理。

// require 加载 browser-sync 模块
var bs = require("browser-sync").create();

// .init 启动服务器
bs.init({
    server: "./app"
});

// 主Browsersync模块出口
bs.reload("*.html");
.create( name )

.create( name )

创建Browsersync实例

name
Type: String
可稍后用于检索的标识符

// 创建一个未命名的实例
var bs = require("browser-sync").create();

// 创建一个命名实例
var bs = require("browser-sync").create('My server');


// 创建多个
var bs1 = require("browser-sync").create('Server 1');
var bs2 = require("browser-sync").create('Server 2');

.get( name )

通过名称获取单个实例。如果你有其他构建脚本在单独的文件，这很有用。

name
Type: String

// 在一个文件中创建一个命名实例...
var bs = require("browser-sync").create('My Server');

// 初始化Browsersync服务器
bs.init({
    server: true
});

// 现在，获取另一个实例。
var bs = require("browser-sync").get('My server');

// 并调用它的任何方法。
bs.watch('*.html').on('change', bs.reload);

.init( config, cb )

启动Browsersync服务。这将启动一个服务器，代理服务器或静态服务器，这取决于你实际需要。

config
Type: Object [optional]
这是你的Browsersync实例的主配置，并且可以包含任何可用的选项。如果你不使用已有的配置参数，Browsersync仍将运行; 但只能在 snippet 模式下

cb
Type: Function [optional]
如果你传递一个回调函数，它会在Browsersync已完成全部安装任务，并准备使用时被调用。或同步执行其他任务：当你需要等待信息（网址，端口等），这非常有用。

var bs = require("browser-sync").create();

// 开始一个Browsersync静态文件服务器
bs.init({
    server: "./app"
});

// 开始一个Browsersync代理
bs.init({
    proxy: "http://www.bbc.co.uk"
});

.reload( arg )

该 reload 方法会通知所有的浏览器相关文件被改动，要么导致浏览器刷新，要么注入文件，实时更新改动。

arg
Type: String | Array | Object [optional]
一个或多个文件被重新加载。

// 浏览器重载
bs.reload();

// 单个文件
bs.reload("styles.css");

// 多个文件
bs.reload(["styles.css", "ie.css"]);

// 在2.6.0里 - 通配符来重新加载所有的CSS文件
bs.reload("*.css");

.stream( opts )

该 stream 方法返回一个变换流，并且可以充当一次或多个文件。

opts
Type: Object [optional]
配置流的方法

注: 至少需要2.6.0版本

// 编译SASS且自动注入到浏览器
gulp.task('sass', function () {
    return gulp.src('scss/styles.scss')
        .pipe(sass({includePaths: ['scss']}))
        .pipe(gulp.dest('css'))
        .pipe(bs.stream());
});

// 提供 `once: true` 限制每个流重装一次
gulp.task('templates', function () {
    return gulp.src('*.jade')
        .pipe(jade())
        .pipe(gulp.dest('app'))
        .pipe(bs.stream({once: true}));
});

// 提供过滤器以被重新加载阻止不需要的文件
gulp.task('less', function () {
    return gulp.src('*.less')
        .pipe(less())
        .pipe(gulp.dest('css'))
        .pipe(bs.stream({match: "**/*.css"}));
});

.notify( msg, timeout )

浏览器消息助手

msg
Type: String | HTML
可以是一个简单的消息，如“连接”或HTML

timeout
Type: Number [optional]
消息将保存在浏览器里时间设置。1.3.0版本

var bs = require("browser-sync").create();

// 文本信息
bs.notify("Compiling, please wait!");

// HTML信息
bs.notify("HTML <span color='green'>is supported</span> too!");

// 1.3.0版本，指定超时
bs.notify("This message will only last a second", 1000);

.exit()

此方法将关闭所有正在运行的服务器，停止文件并退出当前进程。

var bs = require("browser-sync").create();

// 启动服务器
bs.init({server: "./app"});

// 5秒后退出服务器
setTimeout(function () {
    bs.exit();
}, 5000);

.watch( patterns, opts, fn )

单个文件监听。使用此连同Browsersync创建自己的，最小的构建系统

patterns
Type: String
需要监听的文件

opts
Type: Object [optional]
选择要传递给Chokidar对象的参数 - 可设置匹配规则参考文档

fn
Type: Function [optional]
每个事件的回调函数

注: 至少需要2.6.0版本

// 创建一个Browsersync实例
var bs = require("browser-sync").create();

// 监听HTML更改事件并重新加载
bs.watch("*.html").on("change", bs.reload);

// 提供一个回调来捕获所有事件的CSS
// files - 然后筛选的'change'和重载所有
// css文件在页面上
bs.watch("css/*.css", function (event, file) {
    if (event === "change") {
        bs.reload("*.css");
    }
});

// 现在初始化的Browsersync服务器
bs.init({
    server: "./app"
});

.pause()

暂停文件执行事件

.resume()

恢复暂停的事件

.emitter

所使用的运行Browsersync实例（如果存在的话）的内部事件辐射源。你可以用它来发出自己的事件，如更改的文件，记录等。

var bs = require("browser-sync").create();

// 监听 `init` 事件
bs.emitter.on("init", function () {
    console.log("Browsersync is running!");
});

bs.init(config);

.active

一个简单的true/false标志，你可以用它来确定是否有一个当前运行Browsersync实例。

var bs = require("browser-sync").create();

// -> false, init尚未被执行
console.log(bs.active);

bs.init(config, function (err, bs) {

    // -> true，因为BS现在正在运行
    console.log(bs.active);
});

.paused

一个简单的true/false标志来确定是否当前实例暂停

更多信息可以查看Browsersync;