使用Browsersync热更新热替换，解放F5

超简单的入门小例子，有图有真相。固然也够咱们在项目中使用。先看一下目录结构。

这里就使用了一个html和一个css样式表。接下来以下。

1. 安装 Node.js

　　不会安装node.js？太落伍了，懒得教你，自行百度吧。

2. 安装 BrowserSync

安装完node.js以后，在命令行输入npm install -g browser-sync

安装成功后。

2. 启动 BrowserSync

运行如下其中一条命令。Browsersync将建立一个本地服务器并自动打开你的浏览器后访问http://localhost:3000地址，这一切都会在命令行工具里显示。

browser-sync start --server --files "*.css"

　--files 路径是相对于运行该命令的项目（目录）  就是下图黄色字体的目录。

这句命令的意思是，启动BrowserSync 并建立一个本地服务器，监听BowerSync目录下全部的css文件。

 

随后打开了一个网页。

更改css样式

此时此刻 咱们的页面字体颜色变成了红色。

进阶篇

　　咱们在实际开发中，大多数都用本地服务器，我项目的后台就是php语言，因此用的phpStudy搭建的本地开发环境，问题来了，怎么使用本地的服务器，也能热替换个人css，js代码呢。我在本地建立了一个PHP服务器环境，并经过绑定code.cn来访问本地服务器，使用如下命令方式，Browsersync将提供一个新的地址localhost:3000来访问code.cn，并监听其项目根目录下的全部css文件。

phpstudyServer是我本地code.cn域名的根目录，在这个目录下运行下面的命令

简单的网站主页既打开了，修改css样式，一样不用刷新便可换了颜色。
Browsersync官网http://www.browsersync.cn/