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"
},
...
}
分类:
FrontEnd
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
· .NET 适配 HarmonyOS 进展
· 手把手教你更优雅的享受 DeepSeek
· 腾讯元宝接入 DeepSeek R1 模型,支持深度思考 + 联网搜索,好用不卡机!
· AI工具推荐:领先的开源 AI 代码助手——Continue
· 探秘Transformer系列之(2)---总体架构
· V-Control:一个基于 .NET MAUI 的开箱即用的UI组件库