zoukankan      html  css  js  c++  java
  • 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"
      },
    
      ...
    }
    
  • 相关阅读:
    perl 升级到5.20版本
    perl 升级到5.20版本
    Group Commit of Binary Log
    Group Commit of Binary Log
    docker exec 运行命令
    docker exec 运行命令
    mysql timestamp 值不合法问题
    mysql timestamp 值不合法问题
    ulimit 说明
    /etc/security/limits.conf 配置
  • 原文地址:https://www.cnblogs.com/pwc1996/p/8059432.html
Copyright © 2011-2022 走看看