省時(shí)的瀏覽器同步測(cè)試工具
Browsersync能讓瀏覽器實(shí)時(shí)、快速響應(yīng)您的文件更改（html、js、css、sass、less等）并自動(dòng)刷新頁(yè)面。更重要的是 Browsersync可以同時(shí)在PC、平板、手機(jī)等設(shè)備下進(jìn)項(xiàng)調(diào)試。您可以想象一下：“假設(shè)您的桌子上有pc、ipad、iphone、android等設(shè)備，同時(shí)打開(kāi)了您需要調(diào)試的頁(yè)面，當(dāng)您使用browsersync后，您的任何一次代碼保存，以上的設(shè)備都會(huì)同時(shí)顯示您的改動(dòng)”。無(wú)論您是前端還是后端工程師，使用它將提高您30%的工作效率。
- 安裝 Node.js
參照安裝node.js - 安裝 BrowserSync
npm install -g browser-sync
- 啟動(dòng) BrowserSync
一個(gè)基本用途是，如果您只希望在對(duì)某個(gè)css文件進(jìn)行修改后會(huì)同步到瀏覽器里。
如果您需要監(jiān)聽(tīng)多個(gè)類(lèi)型的文件，您只需要用逗號(hào)隔開(kāi)。
打開(kāi)您的命令行工具，進(jìn)入到項(xiàng)目目錄下，運(yùn)行以下其中一條命令。Browsersync將創(chuàng)建一個(gè)本地服務(wù)器并自動(dòng)打開(kāi)你的瀏覽器后訪(fǎng)問(wèn)http://localhost:3000地址，這一切都會(huì)在命令行工具里顯示。
// --files 路徑是相對(duì)于運(yùn)行該命令的項(xiàng)目（目錄 不能是中文路徑）
browser-sync start --server --files "css/*.css, *.html"
// 如果你的文件層級(jí)比較深，您可以考慮使用 **（表示任意目錄）匹配，任意目錄下任意.css 或 .html文件。
browser-sync start --server --files "**/*.css, **/*.html"
