省时的浏览器同步测试工具--Browsersync，释放你的f5

时间 2019-11-21

标签省时浏览器同步测试工具 browsersync 释放 f5 栏目浏览器繁體版

原文原文链接

省时的浏览器同步测试工具--Browsersync，释放你的f5

功能展现

修改代码后按ctrl + s 保存后，页面实时同步刷新，免去了按f5的时间

打开滚动同步的功能后，滑动当前的页面，其余浏览器的同一个页面、其余设备的同一个页面同时滚动。

对前端开发同窗来讲很是友好哦

特色

【热加载】让浏览器实时、快速响应文件的更改，任何一次代码保存，PC、平板、手机等设备都会同时显示改动，使用它将提升您30%的工做效率（热加载）
【页面同步】在一个浏览器中滚动页面、点击等行为也会同步到其余浏览器和设备中，这一切还能够经过可视化界面来控制。
【兼容性】不须要安装浏览器插件便可使用

使用范围

移动端、PC端等多段设备均可兼容。
浏览器直接访问ip+端口便可。

区别（为何用它）

与liveReload的区别php
- LiveReload须要搭配浏览器插件。插件是取决于浏览器的，Chrome和Firefox都有可用插件，但IE，或者手机上的浏览器，就不能正常使用了，而BrowserSync的通常用法则不须要浏览器插件因此全部平台均可以使用。
与 vue 的热加载的区别css
- vue的热加载功能是搭建在vue-cli脚手架上的，而BrowserSync不须要搭建任何框架，能更快速的使用。

总的来讲，BrowserSync能够无视浏览器、无视设备、无视框架快速使用

原理

Browsersync的工做原理是在<body>标签以后插入初始请求的 (<script async>...</script>)异步脚本标记，为了可以正常工做<body>标签必须存在。

安装

安装 Node.jshtml
- BrowserSync是基于Node.js的, 是一个Node模块。
安装 BrowserSync前端
- 全局使用
  npm install -g browser-sync
- 结合gulpjs等构建工具使用

使用（browserSync初体验）

启动 BrowserSync

正常使用(静态项目使用browsersync)vue
- 在项目目录下打开命令窗口（目录名不能为中文名）
- 在命令窗口处输入代码（输入命令后 BrowserSync 将启动一个小型服务器，并提供一个URL来查看您的网站。）chrome
```
// 监听css文件
browser-sync start --server --files "css/*.css"

// 监听css和html文件（若是须要监听多个类型的文件，只须要用逗号隔开）
browser-sync start --server --files "**/*.css, **/*.html,**/*.js"
```
使用代理模式（动态项目使用browsersync,有其余本地服务器环境状况下）vue-cli
- BrowserSync经过代理URL(localhost:3000)来查看网站npm
```
// 主机名能够是ip或域名
browser-sync start --proxy "主机名" "css/*.css"
```

结合配置文件使用gulp

在控制台/命令窗里输入 browser-sync init，就会在当前目录生成一个配置文件bs-config.js
修改好配置文件后在控制台里输入 browser-sync start --config bs-config .js 就将以bs-config.js的完整配置信息运行BrowserSync。

经常使用配置segmentfault

files

//单个文件
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 **/
            }
        }
    ]
});

server 使用内置的静态服务器建立基本的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();
        }
    ]
}

port 指定端口号

//使用（而不是一个自动检测到Browsersync）特定端口
port: 8080

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

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

//启用HTTPS的片断模式
browserSync({
    https: true
});

ghostMode 点击，滚动和表单在任何设备上输入将被镜像到全部设备里（固然你必须正确使用了Url）

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

//或使它们所有关闭，一鼓作气
ghostMode: false

open 决定Browsersync启动时自动打开的网址。默认为“本地”，若是没有设置

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

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

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

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

//打开隧道网址-还必须设置`tunnel`选项
open: "tunnel"

browser 指定浏览器打开

//在Chrome浏览器中打开网站
browser: "google chrome"

// 在chrome、firefix下打开该站点
browser: ["google chrome", "firefox"]

startPath 指定起始路径，打开浏览器

// URL处打开一个浏览器窗口+“/info.php”
startPath: "/info.php"

更多配置信息请到官网查看：http://www.browsersync.cn/doc...

browserSyn经常使用命令行

browserSync命令行方法

命令行经常使用方法：browser-sync start <options>

--server    运行本地服务器（使用您的CWD做为Web根）（相似于anywhere启动服务）
--files        监测的文件路径 ("**/*.css, **/*.html,**/*.js")
--startPath    指定起始路径，打开浏览器
--open    选择哪一个URL是自动打开（本地，外部或隧道）
--https        用https协议打开
--port        指定要使用的端口
--url        提供完整的URL运行Browsersync实例
--ui-port    指定端口的UI使用
--no-ui        不要启动用户界面
--no-open    不要打开一个新的浏览器窗口
--config    指定为BS-config.js文件的路径
reload    重载
    --files    文件路径重载
    --port    经过目标端口号的运行实例
    --url    提供完整的URL运行Browsersync实例

更多命令请到官网查看：http://www.browsersync.cn/doc...

其余

UI界面
- 控制台启动browserSync后，经过控制台给出的地址进入ui界面，它是BrowserSync提供的一个简易控制面板。
若是发生变化的文件是css，BrowserSync会以无刷新方式来更新。若是使用scss、less等预编译器，将监听设置为编译后的css文件便可。

参考地址

最后

本文章仅提供简单的使用教程，如需跟深层次的学习，请到官网或者找寻其余资料来学习。