使用 browsersync 讓網頁能在瀏覽器中即時預覽

發表於 更新於 分類於 Disqus：

前言

在重新開始學前端後，就一直很想能像 Codepen 那樣，能編輯完程式碼後，就即時在瀏覽器看到即時畫面。曾測試過一些方法，但都無法。後來找到了 browser-sync

原理

在我理解中，browser-sync 會建立一個簡易的 server，並監測專案資料夾裡面的檔案。如果檔案有變更的話，就重新整理頁面。另外，server 端會在 <body> 插入相關語法，因此沒加入 <body> 的網頁是不會自動重整的（我踩這個雷踩了好幾個小時 QQ）

作法

以下只記錄簡單的作法

先安裝 node.js，會自帶 npm 管理工具

  • 到官網下載安裝
  • 或是透過 chocolately 安裝
1
choco install node.js

在全局安裝 browser-sync

1
npm install -g browser-sync

監測檔案、開啟網頁、即時重整預覽

1
browser-sync start --server --file "*.*"

參考資料