Browsersync API

Browsersync 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"
});

// 现在请BS,而不是方法
// 主Browsersync模块出口
bs.reload("*.html");

创建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');

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

// 在一个文件中创建一个命名实例... 
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);

启动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
  • 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
  • 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"}));
});

浏览器消息助手

  • 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);

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

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

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

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

单个文件监听。使用此连同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"
});

暂停文件执行事件

恢复暂停的事件

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

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

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

bs.init(config);

一个简单的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);
});

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