省時的瀏覽器同步測試工具--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實例