[指南] 運用 BrowserSync 來重整頁面達成 Hot Reload @地瓜大的飛翔旅程

章節連結

步驟

在使用 Visual Studio Code ( VS Code ) 內的 Preview on web server 套件時，發現其背後用的套件就是 BrowserSync 。由於 Preview on web server 中沒有辦法自定義 Server 的啟動位置(一律都為資料夾根目錄)，所以就用 npm 去下載原生的套件來作開發使用。

步驟

1. 首先使用 npm 工具，全域情況下安裝。

npm install -g browser-sync

1	npm install -g browser-sync

2. 在專案的根目錄中，執行以下指令：

// 啟動一個 server，監聽其下資料夾中附檔名為 vue 和 css 的檔案
browser-sync start --server --files="./*.vue, ./*.css"

// 若你要全部監聽，那可以使用萬用字元即可
browser-sync start --server --files="*"

// 啟動一個 server，監聽其下資料夾中附檔名為 vue 和 css 的檔案

browser-sync start --server --files="./*.vue, ./*.css"

// 若你要全部監聽，那可以使用萬用字元即可

browser-sync start --server --files="*"

3. 預設的開啟 port 是 3000，至於 BrowserSync 的 UI 設定介面是開在 3001。詳細的使用方法，可以上官網查看。