webpack之browser-sync的使用

browser-sync介紹:省時的瀏覽器同步測試工具(官方在中文網站)

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

sync-demo.gif

有了它，您不用在多個瀏覽器、多個設備間來回切換，頻繁的刷新頁面。更神奇的是您在一個瀏覽器中滾動頁面、點擊等行為也會同步到其他瀏覽器和設備中，這一切還可以通過可視化界面來控制。

scroll-demo.gif

使用步驟

  1. BrowserSync是基于Node.js的, 是一個Node模塊， 如果您想要快速使用它，也許您需要先安裝一下Node.js .
  2. 安裝 BrowserSync
  npm install -g browser-sync   //全局安裝
  npm install --save-dev browser-sync   //本地安裝 安裝到開發環境中 寫入package.json 配置文件中,
  1. 啟動 BrowserSync
// --files 路徑是相對于運行該命令的項目（目錄） 
browser-sync start --server --files "css/*.css, *.html"
// 如果你的文件層級比較深，您可以考慮使用 **（表示任意目錄）匹配，任意目錄下任意.css 或 .html文件。 
browser-sync start --server --files "**/*.css, **/*.html"

// 監聽css文件 
browser-sync start --server --files "css/*.css"
// 監聽css和html文件 
browser-sync start --server --files "css/*.css, *.html"
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容