1分鐘製作codepan的自動刷新 - Browser-Sync

功能

涉及到畫面製作與調整的專案, 在開發階段常常需要常常檢視代碼畫面的連動

不想要頻繁的手動刷瀏覽器, 也不想遷就codepan的介面, 請愛用Browser-Sync

npm網址:  https://www.npmjs.com/package/browser-sync
詳細說明: https://browsersync.io/

兩個步驟搞定

step 1 - 安裝

npm install -g browser-sync

跟nodemon一樣, 建議使用全域安裝, 這樣每個專案都可以使用

step 2 - 執行

假設我們已經在localhost3000執行要監看的專案

此時你需要修改一下執行命令

官網上有詳細說明, 但是這邊我分享我修改後的命令

在你的專案路近下, 終端機輸入此命令

browser-sync start --proxy "localhost:3000" --files "./**/**/**"

瀏覽器會開啟一個新視窗(應該是http://localhost:3001)

這樣你變動任何檔案  例如: html, css, hbs, js 都會自動刷新瀏覽器

至於涉及到伺服器重啟動作, 則是需要安裝/使用nodemon