免費(fèi)AI編程助手
我的Browsersync筆記
BrowserSync——省時(shí)的瀏覽器同步測試工具。
Browsersync能讓瀏覽器實(shí)時(shí)、快速響應(yīng)您的文件更改（html、js、css、sass、less等）并自動(dòng)刷新頁面。更重要的是Browsersync可以同時(shí)在PC、平板、手機(jī)等設(shè)備下進(jìn)項(xiàng)調(diào)試。您可以想象一下：“假設(shè)您的桌子上有pc、ipad、iphone、android等設(shè)備，同時(shí)打開了您需要調(diào)試的頁面，當(dāng)您使用browsersync后，您的任何一次代碼保存，以上的設(shè)備都會(huì)同時(shí)顯示您的改動(dòng)”。無論您是前端還是后端工程師，使用它將提高您30%的工作效率。
大約半年前有位大牛想我推薦這個(gè)工具，但一直沒有實(shí)踐，今天準(zhǔn)備好好研究研究，并記錄在此。
安裝
安裝Node后，通過npm安裝BrowserSync：
$ npm install -g browser-sync
安裝完后在命令行輸入下面的命令，查看是否安裝成功：
$ browser-sync --version
若安裝成功能看到一個(gè)三位版本號(hào)，如下圖所示：
安裝好后輸入下面的命令可以查看幫助文檔：
$ browser-sync --help
glob
開始之前先讓我們來簡單了解下glob語法，glob就是精簡版的正則表達(dá)式，主要用來匹配文件，語法規(guī)則如下：
*匹配多個(gè)除了/以外的字符?匹配單個(gè)除了/以外的字符**匹配多個(gè)字符包括/{}可以讓多個(gè)規(guī)則用,逗號(hào)分隔，起到或者的作用!出現(xiàn)在規(guī)則的開頭，表示取反。即匹配不命中后面規(guī)則的文件
更多內(nèi)容請(qǐng)查看這里。
本地開發(fā)
接下來我們看看如何在本地開發(fā)時(shí)使用，比如我本地有一個(gè)目錄，我想監(jiān)視這個(gè)目錄的css修改，那么先切換到這個(gè)目錄，然后執(zhí)行下面的命令即可：
browser-sync start --server --files "**.css"
請(qǐng)注意這個(gè)命令里的start –server，這其實(shí)是BrowserSync自己啟動(dòng)了一個(gè)小型服務(wù)器，然后我們通過下面的url訪問我們的網(wǎng)站(http://localhost:3000)。
注意：3000端口可能被占用，如果被占用可以用下面的命令指定一個(gè)端口：
browser-sync start --server --port 8081 --files "**.css"
典型的效果圖如下所示：
也可以像下面這樣匹配所有文件的改動(dòng)：
browser-sync start --server --files "**"
此時(shí)，BrowserSync仍然會(huì)正確地判斷文件變化是否是css，若是其他文件發(fā)生變化則刷新頁面。
代理模式
很多時(shí)候我們往往會(huì)在本地大家一個(gè)服務(wù)器用來開發(fā)，這時(shí)我們需要使用代理模式：
browser-sync start --proxy "localhost:8080" --files "**"
gulp
Gulp是現(xiàn)在流行的自動(dòng)化工具，但BrowserSync并沒有Gulp插件版，因?yàn)椴⒉恍枰?。BrowserSync有自己獨(dú)立的API，將它注冊(cè)為gulp的一個(gè)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"]);
這時(shí)候運(yùn)行g(shù)ulp將等同于前文的browser-sync start –server –files “**“。更多的用法示例請(qǐng)查看gulp-browser-sync。
UI界面及其他
BrowserSync提供的一個(gè)簡易控制面板。BrowserSync最常用的幾個(gè)配置選項(xiàng)，都可以在這個(gè)面板里調(diào)整。如果沒有指定打開http://localhost:3001/會(huì)看到下面的界面。
這里提供了不少功能，值得一提的是內(nèi)置了weinre，這些可以拋棄weinre了，這個(gè)比那個(gè)用起來簡單多了，o(∩_∩)o 哈哈。
總結(jié)
好了就先寫這么多吧，如果你有更多需求請(qǐng)查看官方文檔，或者下面列出的參考資料。
更多建議：