browser-sync文件监听失败的解决方案

发表于
两岸青山相对出，孤帆一片日边来

问题

为了方便实时预览前端开发过程中修改源码后的页面，推荐一个非常实用的工具，browser-sync。

安装使用方式请自行到官网https://browsersync.io/参考文档，仓库地址在这里https://github.com/BrowserSync/browser-sync

GetStart中官网给出的CLI示例命令为：

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

我将其写到到npm命令中，package.json 相关内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
{
  ...

  "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命令为

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

而官方CLI命令为

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

问题就出在分号的不同上（browser-sync没能解析单引号的内容）

解决
因此，我将 npm命令 中的 ‘ 替换为 " 即可解决问题。更改后的 package.json 内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
{
  ...

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

  ...
}

https://blog.csdn.net/pwc1996/article/details/76849876