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官网

　　官网

转载于:https://www.cnblogs.com/ralapgao/p/10523361.html