閱讀(1.8k) 書簽贊(0) 我要糾錯

我的Browsersync筆記

2018-06-16 16:33 更新

BrowserSync——省時的瀏覽器同步測試工具。

Browsersync能讓瀏覽器實時、快速響應您的文件更改（html、js、css、sass、less等）并自動刷新頁面。更重要的是Browsersync可以同時在PC、平板、手機等設備下進項調(diào)試。您可以想象一下：“假設您的桌子上有pc、ipad、iphone、android等設備，同時打開了您需要調(diào)試的頁面，當您使用browsersync后，您的任何一次代碼保存，以上的設備都會同時顯示您的改動”。無論您是前端還是后端工程師，使用它將提高您30%的工作效率。

大約半年前有位大牛想我推薦這個工具，但一直沒有實踐，今天準備好好研究研究，并記錄在此。

安裝

安裝Node后，通過npm安裝BrowserSync：

$ npm install -g browser-sync

安裝完后在命令行輸入下面的命令，查看是否安裝成功：

$ browser-sync --version

若安裝成功能看到一個三位版本號，如下圖所示：

安裝好后輸入下面的命令可以查看幫助文檔：

$ browser-sync --help

glob

開始之前先讓我們來簡單了解下glob語法，glob就是精簡版的正則表達式，主要用來匹配文件，語法規(guī)則如下：

* 匹配多個除了 / 以外的字符
? 匹配單個除了 / 以外的字符
** 匹配多個字符包括 /
{} 可以讓多個規(guī)則用 , 逗號分隔，起到或者的作用
! 出現(xiàn)在規(guī)則的開頭，表示取反。即匹配不命中后面規(guī)則的文件

更多內(nèi)容請查看這里。

本地開發(fā)

接下來我們看看如何在本地開發(fā)時使用，比如我本地有一個目錄，我想監(jiān)視這個目錄的css修改，那么先切換到這個目錄，然后執(zhí)行下面的命令即可：

browser-sync start --server --files "**.css"

請注意這個命令里的start –server，這其實是BrowserSync自己啟動了一個小型服務器，然后我們通過下面的url訪問我們的網(wǎng)站(http://localhost:3000)。

注意：3000端口可能被占用，如果被占用可以用下面的命令指定一個端口：

browser-sync start --server --port 8081 --files "**.css"

典型的效果圖如下所示：

也可以像下面這樣匹配所有文件的改動：

browser-sync start --server --files "**"

此時，BrowserSync仍然會正確地判斷文件變化是否是css，若是其他文件發(fā)生變化則刷新頁面。

代理模式

很多時候我們往往會在本地大家一個服務器用來開發(fā)，這時我們需要使用代理模式：

browser-sync start --proxy "localhost:8080" --files "**"

gulp

Gulp是現(xiàn)在流行的自動化工具，但BrowserSync并沒有Gulp插件版，因為并不需要。BrowserSync有自己獨立的API，將它注冊為gulp的一個task即可。下面是一段gulpfile.js的示例：

var gulp = require('gulp');
var browserSync = require('browser-sync');

gulp.task('browser-sync', function() {
    browserSync({
        files: "**",
        server: {
            baseDir: "./"
        }
    });
});

gulp.task('default', ["browser-sync"]);

這時候運行gulp將等同于前文的browser-sync start –server –files “**“。更多的用法示例請查看gulp-browser-sync。