在开发静态的 HTML 页面时，屏幕通常是左边浏览器，打开正在测试的页面，右边 VSCode 写代码。如果要修改代码，VSCode 保存好，再手动在浏览器刷新一下页面才能看到效果。这样浏览器和 VSCode 不停地切换，不仅效率低，而且会打断思路。
所以，我们需要一个功能，只要保存 HTML / CSS / JavaScript 文件，浏览器就会自动刷新，显示最新的效果。
他们来了！他们来了！他们来了！
这个功能可以叫做 实时更新、自动更新、热加载、live reload、hot reload。有很多 npm 包可以实现这样的功能，我推荐两个比较牛逼的插件：
- live-server
- Browser-sync
这两个插件都是 npm 包，所以，安装的前提是，首先安装好 Node.js。
live-server
1. 安装 live-server
npm install -g live-server
安装好 node.js 后才能使用 npm 命令
2. 配置 npm 脚本
在 HTML 项目的根目录下初始化 npm 配置
npm init -y
项目根目录下如果已经有
package.json文件，表示已经是初始化了，这一步不需要执行。
打开 package.json 文件，找到 scripts 节点，添加如下命令：
"scripts": {
"dev": "live-server"
},
3. 启动 live-server
在根目录下运行：
npm run dev
看到 serving ..... 表示服务器已经启动成功，打开 http://127.0.0.1:8080（会自动打开），即可看到首页。
见证奇迹的时刻到了，只要编辑项目下的任何文件，一按保存，页面马上会自动刷新。
更多配置，可查看 github 页面说明文档。
Browser-sync
Browser-sync 使用方法和 live-server 大同小异。
1. 安装 Browser-sync
npm install -g browser-sync
2. 配置 npm 脚本
"scripts": {
"dev": "browser-sync start --server --files \"**/**.*\""
},
配置稍微有点不一样，关键是 --files 后面跟的是要监测的文件，上面代表监测项目目录下的所有文件。
3. 启动 live-server
npm run dev
同样，启动后也会打开首页，但是它监听的端口是 3000。
Browser-sync 的功能是非常强大的，也可以用做动态网站开发，具体查看官方文档。
监听原理
以 live-server 原理解释，browser-sync 类似
live-server 是一个 node 应用，相当于一个功能小巧的服务器，它可以为项目下的所有文件提供服务。当 live-server 运行时，只要通过它请求的 html 文件，live-server 自动往 html 页面插入一小段 JavaScript 代码，这些代码用来和 live-server 建立 socket 链接，这样，浏览器的 HTML 页面就能和 live-server 通信了。同时，live-server 会检测项目下的文件变化，当有文件保存，live-server 通过 socket 通知 HTML 页面，重新加载 HTML 页面并且刷新。特别的，如果是 CSS 文件改变，live-server 并不会刷新整个页面，而是重新加载 CSS 而已。
live-server 的 VSCode 插件版
另外，如果你使用的 IDE 是 VSCode，可以安装 live server 插件，使用更简单。
打开 VSCode 的插件面板，搜索 live server (注意：中间是空格，不是一杠)，排名第一的就是。
安装后注意看右下角，多了一个按钮 Go Live，点一下就启动了！可以愉快地玩耍了。
其实还可以在 HTML 页面，点击右键，弹出菜单的
Open with Live Server也是启动 Live Server 的
