• BrowserSync 热更新的使用(保存后自动刷新)


     BrowserSync使用的优点,BrowserSync监听条件中的文件,发现更新会立刻刷新浏览器,就像 vue中的热更新一样,解放F5实现自动更新,提高开发效率,

    解决了使用双屏幕时来回切换的烦恼!

    一 .安装node

      BrowserSync是基于Node.js的, 是一个Node模块,如果没有node.js 麻烦自行解决(百度)

    二. 安装BrowserSync

      从Node.js的包管理(NPM)库中安装BrowserSync。打开一个终端窗口,运行以下命令:

    npm install -g browser-sync

    三. 使用BrowserSync

      1. 监听.css文件, 使用服务器模式。 BrowserSync 将启动一个小型服务器,并提供一个URL来查看网站。

    // --files 路径是相对于运行该命令的项目(目录) 
    browser-sync start --server --files "css/*.css"

      2. 要监听多个类型的文件,只需要用逗号隔开。例如我们再加入一个.html文件

    // --files 路径是相对于运行该命令的项目(目录) 
    browser-sync start --server --files "css/*.css, *.html"
    // 如果你的文件层级比较深,您可以考虑使用 **(表示任意目录)匹配,任意目录下任意.css 或 .html文件。 
    browser-sync start --server --files "**/*.css, **/*.html"

      3. 动态网站

        3.1 已经有其他本地服务器环境PHP或类似的需要使用代理模式。 BrowserSync将通过代理URL(localhost:3000)来查看网站。

    // 主机名可以是ip或域名
    browser-sync start --proxy "主机名" "css/*.css"

        3.2 在本地创建了一个PHP服务器环境,并通过绑定Browsersync.cn来访问本地服务器,使用以下命令方式,Browsersync将提供一个新的地址localhost:3000来访问Browsersync.cn,      并监听其css目录下的所有css文件。

    browser-sync start --proxy "Browsersync.cn" "css/*.css"

    四: Browsersync官网

      官网

  • 相关阅读:
    FusionCharts的类
    FusionCharts图表控件中文版使用手册
    java Integer
    java --final关键字
    HTTP缓存机制及原理
    java颜色代码对照表
    centos svn 服务器间的数据迁移
    tp3.2 URL_MODEL为2 配置
    order by group by
    jpgraph 折线图--解决中文乱码的问题(标题和图例)
  • 原文地址:https://www.cnblogs.com/ralapgao/p/10523361.html
Copyright © 2020-2023  润新知