browser-sync 文件監聽失敗的解決方案

問題

爲了方便實時預覽前端開發過程當中修改源碼後的頁面，我在全球最大的同性交友網Github中找到了一個很是實用的工具，browser-sync。

安裝使用方式請自行到官網https://browsersync.io/參考文檔，倉庫地址在這裏https://github.com/BrowserSync/browser-sync

GetStart中官網給出的CLI示例命令爲：

browser-sync start --server --files "css/*.css"

我將其寫到到npm命令中，package.json 相關內容以下：

{
  ...
  
  "scripts": {
    "dev": "browser-sync start --server --files 'css/*.css'"
  },
  "devDependencies": {
    "browser-sync": "^2.18.13"
  },

  ...
}

接着執行 npm run dev，控制檯輸出一切正常。

然而，當我修改 css/style.css 這個文件的時候，發現瀏覽器並無刷新，這說明 browser-sync 並未成功監聽 css/*.css 文件的修改。

分析

爲此，我翻了一遍 browser-sync 的issue，發現有人遇到相同的問題，也給出瞭解決方案。

問題出在命令行參數上，仔細對比，咱們也會發現：

• 我寫的CLI命令爲

browser-sync start --server --files 'css/*.css'

• 而官方CLI命令爲

browser-sync start --server --files "css/*.css"

問題就出在分號的不一樣上（browser-sync沒能解析單引號的內容）

解決

所以，我將 npm命令 中的 ' 替換爲 \" 便可解決問題。更改後的 package.json 內容以下：

{
  ...
  
  "scripts": {
    "dev": "browser-sync start --server --files \"css/*.css\""
  },
  "devDependencies": {
    "browser-sync": "^2.18.13"
  },

  ...
}