Browsersync options (选项配置)

这些都是可以使用Browsersync时配置的选项。创建一个对象,并把它作为 第一个参数 (用于GulpJS和正常API的使用)。如果你使用Grunt,你仍然可以使用所有这些选项,但是你需要参考详细的 Browsersync Grunt 文档

  • Type: Object

注: 至少需要2.0.0版本

Browsersync通过单独的端口访问可视化控制页面。可视化界面允许控制所有的设备,同步推送更新等等。

// 更改默认端口
ui: {
    port: 8080
}

//更改默认端口weinre
ui: {
    port: 8080,
    weinre: {
        port: 9090
    }
}

//禁用UI完全 
ui: false
  • Type: Array | String
  • Default: false

Browsersync可以在工作中监听文件。您所做的更改要么被注入到页面(CSS和图像),或将导致所有浏览器做一个完整的页面刷新。参加见 anymatch 关于glob模式的更多信息。

//单个文件
browserSync({
    files: "app/css/style.css"
});

//多个文件
browserSync({
    files: ["app/css/style.css", "app/js/*.js"]
});

//格式 + 1 自定义回调
// 2.6.0自
browserSync({
    files: [
        "wp-content/themes/**/*.css",
        {
            match: ["wp-content/themes/**/*.php"],
            fn:    function (event, file) {
                /** Custom event handler **/
            }
        }
    ]
});
  • Type: Object
  • Default: undefined

注: 至少需要2.6.0版本

文件看着那相处传递选项 Chokidar.检查他们的文档可供选择

//选项传递给Chokidar
watchOptions: {
    ignoreInitial: true,
    ignored: '*.txt'
}

//选择chokidar与定制的回调
// 2.6.0自
files: [
    {
        match: ["wp-content/themes/**/*.php"],
        fn: function (event, file) {
            /** Custom event handler **/
        },
        options: {
            ignored: '*.txt'
        }
    }
]
  • Type: Object | Boolean
  • Default: false

使用内置的静态服务器创建基本的HTML / JS / CSS的网站。

//从应用程序目录中的文件即成
server: {
    baseDir: "app"
}

//从与目录列表的应用程序目录中的文件即成
server: {
    baseDir: "app",
    directory: true
}

//多个基目录
server: {
    baseDir: ["app", "dist"]
}

//从应用程序目录中提供文件,指定特定文件名为索引
server: {
    baseDir: "app",
    index: "index.htm"
}

//由于1.2.1版本
//关键是URL匹配
//值是文件夹要提供的(相对于当前的工作目录)
server: {
    baseDir: "app",
    routes: {
        "/bower_components": "bower_components"
    }
}

//自定义中间件
server: {
    baseDir: "./",
    middleware: function (req, res, next) {
        console.log("Hi from middleware");
        next();
    }
}

//多个自定义中间件
server: {
    baseDir: "./",
    middleware: [
        function (req, res, next) {
            console.log("Hi from first middleware");
            next();
        },
        function (req, res, next) {
            console.log("Hi from the second middleware");
            next();
        }
    ]
}
  • Type: String | Object | Boolean

代理现有的虚拟主机。Browsersync将包裹你的虚拟主机使用代理网址查看您的网站。

//使用虚拟主机,基于URL
proxy: "local.dev"

//使用本地主机地址与端口 
proxy: "localhost:8888"

//使用本地主机子目录
proxy: "localhost/site1"

//中间件 - 需要V2.1.0
proxy: {
    target: "http://yourlocal.dev",
    middleware: function (req, res, next) {
        console.log(req.url);
        next();
    }
}

//使用自定义请求头 - 需要V2.1.0
proxy: {
    target: "localhost:8000",
    reqHeaders: function (config) {
        return {
            "host":            config.urlObj.host,
            "accept-encoding": "identity",
            "agent":           false
        }
    }
}
  • Type: Number
  • Default: 3000
//使用(而不是一个自动检测到Browsersync)特定端口 
port: 8080
  • Type: Boolean
  • Default: undefined

注: 至少需要1.3.0版本

启用HTTPS本地主机。 注意 - 这是没有必要的代理选项,因为它会从你的目标URL推断。

//启用HTTPS静态文件服务器
browserSync({
    server: "./app",
    https: true
});

//启用HTTPS的片段模式
browserSync({
    https: true
});
  • Type: Object

点击,滚动和表单在任何设备上输入将被镜像到所有设备里(当然你必须正确使用了Url)。

//在这里你可以禁用/启用 每个单独的功能
ghostMode: {
    clicks: true,
    forms: true,
    scroll: false
}

//或使它们全部关闭,一气呵成 
ghostMode: false
  • Type: String
  • Default: info

可以是“信息”,“调试”,“警告”,或“为空”

//显示了我对过程的其他信息 
logLevel: "debug"

//只是显示基本信息 
logLevel: "info"

//在命令行里输出为空 
logLevel: "silent"
  • Type: String
  • Default: BS

注: 至少需要1.5.1版本

改变控制台日志前缀。如果你正在创建基于Browsersync的项目,这将会很有用

logPrefix: "My Awesome Project"

// [My Awesome Project] Local URL: http://localhost:3000
// [My Awesome Project] Watching files....
// [My Awesome Project] File changed: "index.html"
  • Type: Boolean
  • Default: false
//记录连接
logConnections: true

//不记录连接 
logConnections: false
  • Type: Boolean
  • Default: true
//日志信息有关更改的文件
logFileChanges: true

//不记录文件更改 
logFileChanges: false
  • Type: : Boolean
  • Default: true

注: 至少需要1.5.2版本

登录该片段到控制台当你在片段模式(无代理/服务器)

//永远不要登录该片段 
logSnippet: false
  • Type: Object

注: 至少需要2.0.0版本

从1.7.0以来!您可以控制​​片段是通过自定义的regex ​​+功能注入到每一页。您还可以提供为模式应该从片段注入忽视某些网址。

snippet
//而忽略某些路径
snippetOptions: {

    //忽略Templates文件夹中的所有HTML文件 
    ignorePaths: "templates/*.html",

    //提供一个自定义的正则表达式插入片段。
    rule: {
        match: /<\/body>/i,
        fn: function (snippet, match) {
            return snippet + match;
        }
    }
}
  • Type: Array | Boolean
  • Default: false

注: 至少需要2.4.0版本

添加额外的HTML重写规则

//替换词Browsersync每一次出现以“kittenz”
rewriteRules: [
    {
        match: /browserSync/g,
        fn: function (match) {
            return 'kittenz';
        }
    }
]
  • Type: String | Boolean
  • Default: null
// Tunnel 通过随机公共网址Browsersync服务器
// -> http://randomstring23232.localtunnel.me
tunnel: true

// 尝试使用URL "http://my-private-site.localtunnel.me"
tunnel: "my-private-site"
  • Type: Boolean
  • Default: undefined

Browsersync的某些功能 (如 xip & tunnel) 需要互联网连接,但如果你离线工作,你可以通过这个选项设置,以减少启动时间false

// //不会尝试确定你的网络状况,假设你在线。 
online: true

// //不会尝试确定你的网络状况,假设你离线 
online: false
  • Type: Boolean | String
  • Default: true

决定Browsersync启动时自动打开的网址。默认为“本地”,如果没有设置。可以是真实的,local, external, ui, ui-external, tunnel or false

//停止自动打开浏览器
open: false

//打开本地主机URL
open: "local"

//打开外部URL -必须在网上 
open: "external"

//打开用户界面-自从2.0.0 
open: "ui"

//打开隧道网址-还必须设置`tunnel`选项 
open: "tunnel"
  • Type: String | Array
  • Default: default
//在Chrome浏览器中打开网站 
browser: "google chrome"

// 在chrome、firefix下打开该站点
browser: ["google chrome", "firefox"]
  • Type: Boolean
  • Default: false

需要互联网连接-有用的服务,如 Typekit ,因为它允许您配置领域,如 *.xip.io 在你的包设置

//附加“.xip.io”的主机名。(例如:http://192.168.0.4.xip.io:3002) 
xip: true
  • Type: Boolean
  • Default: false

刷新每个浏览器时Browsersync重新启动。

//不自动重装下一个Browsersync重装所有的浏览器 
reloadOnRestart: false
  • Type: Boolean
  • Default: true

并不总是需要在浏览器中弹出小超过通知/想要的。

//不显示在浏览器中的任何通知。
notify: false
  • Type: Boolean
  • Default: true
scrollProportionally: false //视口同步到顶部位置
  • Type: Number
  • Default: 0
scrollThrottle: 100 //只发送滚动事件每100毫秒
  • Type: Number
  • Default: 0

时间,以毫秒为单位,以指示浏览器之前,等待加载/注以下文件更改事件

//等待2秒钟之前的任何浏览器应该尝试注入/加载的文件。 
reloadDelay: 2000
  • Type: Number
  • Default: 0

注: 至少需要2.6.0版本

限制在浏览器中的频率:刷新事件可以被发射到连接的客户机

//等待重装事件2秒后允许更多前
reloadDebounce: 2000
  • Type: Array
  • Default: []

注: 至少需要2.6.0版本

用户提供的插件

//首先运行`NPM安装BS-HTML-injector` 
//然后提供模块名
plugins: ["bs-html-injector"]

//如果您使用的是插件需要选择
// 就像 bs-snippet-injector requires 一个 'file' 选项,
// 你可以传递一个对象,而不是这样的。
plugins: [
    {
        module: "bs-snippet-injector",
        options: {
            file: "./app/index.php"
        }
    }
]
  • Type: Boolean
  • Default: true
//注入CSS改变
injectChanges: true,

//不要尝试注入,只是做一个页面刷新 
injectChanges: false,
  • Type: String | Null
  • Default: null
// URL处打开一个浏览器窗口+“/info.php”
startPath: "/info.php"
  • Type: Boolean
  • Default: true

无论是中缩小客户端脚本,还是不行。

//不要运行如下的客户端JS 
minify: false
  • Type: String
  • Default: null
//覆盖主机检测,如果你知道正确的IP使用 
host: "192.168.1.1"
  • Type: Boolean
  • Default: true
//不要发送任何文件改变事件给浏览器 
codeSync: true,
  • Type: Boolean
  • Default: true
//不追加时间戳文件注入
timestamps: false
  • Type: Function
  • Default: undefined

注: 至少需要1.5.0版

为改变完全控制了那里的Browsersync JavaScript是从服务的脚本路径。无论你从这个函数返回将用作脚本路径。

//这将导致类似
// localhost:3002/browser-sync/browser-sync-client.1.6.0.js
scriptPath: function (path) {
    return "localhost:3002" + path;
}

// :由于2.2.0
// 如果您使用的是<基>在你的HTML,你可能需要给脚本的绝对路径
// http://localhost:3002/browser-sync/browser-sync-client.1.6.0.js
scriptPath: function (path, port, options) {
    return options.get("absolute");
}
  • Type: Object

注: 至少需要1.6.2版本

配置Socket.IO路径和命名空间,以避免冲突。注意: 命名空间 也可以是 function

// 这将导致这样的事情在
// 插座连接器代码
// browserSync.io('localhost:3003/browser-sync')
socket: {
    namespace: function (namespace) {
        return "localhost:3003" + namespace;
    }
}