當內容發生變化時，如何通過 BrowserSync 讓瀏覽器自動刷新頁面？

作者：大V

編輯：藍妹兒

前言

當內容發生變化時，如何讓瀏覽器自動刷新頁面呢？ 當然，常規的做法是：點擊刷新瀏覽器按鈕，或者按下F5鍵。我們希望自動刷新，而不是每次都要按一下刷新鍵。無論您是前端還是後端工程師，使用它將提高您30%的工作效率。

怎麼實現呢？ 方法是有的，且看下文。

原理

其實現原理是，監聽內容文件夾, 當檢測到內容改動時，自動刷新頁面, 例如 html, css 、JavaScript 等。這一切，可以藉助 BrowserSync來實現。

安裝步驟

安裝 Node.js

BrowserSync是基於Node.js的, 是一個Node模塊， 如果您想要快速使用它，也許您需要先安裝一下 Node.js 。

安裝 BrowserSync

如果npm在國內非常慢, 你可以考慮淘寶鏡像來加速 : 淘寶 NPM 鏡像

您可以選擇從Node.js的包管理（NPM）庫中 安裝BrowserSync。打開一個終端窗口，運行以下命令：

您告訴包管理器下載BrowserSync文件，並在全局下安裝它們，您可以在所有項目(任何目錄)中使用。

啟動 BrowserSync

一個基本用途是，如果您只希望在對某個文件進行修改後會同步到瀏覽器里。那麼您只需要運行命令行工具，進入到該項目（目錄）下，並運行相應的命令：

靜態網站

如果您想要監聽文件, 您需要使用伺服器模式。 BrowserSync 將啟動一個小型伺服器，並提供一個URL來查看您的網站。

如果您需要監聽多個類型的文件，您只需要用逗號隔開。例如我們再加入一個文件

特別注意事項

要檢測的文件，一定要放到指定的路徑下。 比如與所屬路徑不同。

把所有想要檢測的文件內容，都放到指定的路徑；

如果要檢測 javascript 文件，需要修改如下：

動態網站

如果您已經有其他本地伺服器環境比如 node.js 服務，您需要使用代理模式。 BrowserSync將通過代理URL(localhost:3000)來查看您的網站。

主機名可以是ip或域名

$ browser-sync start --proxy "主機名" "css/*.css"

小結

如果用到了webpack， 還可以通過 browser-sync plugin + webpack，達到同等的檢測效果。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！