zoukankan      html  css  js  c++  java
  • 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官网

      官网

  • 相关阅读:
    项目打包文件build.xml
    【转】常见面试之机器学习算法思想简单梳理
    【转】11位机器学习大牛最爱算法全解
    Simplify Path
    Text Justification
    Valid Number
    Substring with Concatenation of All Words
    Shortest Palindrome
    Palindrome Pairs
    Decode Ways
  • 原文地址:https://www.cnblogs.com/ralapgao/p/10523361.html
Copyright © 2011-2022 走看看