传统 Web 项目热更新 和 使用 less 预处理器 热更新

项目热更新

在传统的项目里，如果不使用 webpack 等工具的情况下，更改代码，需要手动刷新页面，这样比较麻烦。所以为了简化操作我们需要使用插件来实现这个功能。

打开 VScode，点击左侧第 5 个图标，在插件市场里搜索 live Server，点击 install 安装。安装好后，如果当前页面刷新了，则可以看到当前页面的右下角有 go live 图标（如果没有则需要从新打开一下），点击它则会在页面开启一个本地服务器。

这回更改代码后，保存（ctrl + s）则可以看到页面会自动刷新了。

less 热更新

less 是 css 的预处理器，能够使用嵌套的方式和变量等来写 css 代码。如果在项目中使用 less 的话，同样更改代码后，需要手动编译： lessc xxx.less xxx.css，这样操作同样很麻烦，所以需要借助一个 npm 包 watcher-lessc来简化操作。

首先，在要热更新文件的目录下，打开 cmd ，然后全局安装 watcher-lessc： npm install -g watcher-lessc。要热更新某个 less 文件的话，需要执行命令：watcher-lessc -i xxx.less -o xxx.css， xxx 是文件名（更多命令请参考watcher-lessc）。

这样以后修改其样式并保存后，等候几秒，页面就会自动刷新。

---

通过安装以上两个插件和包后，就可以实现项目自动热更新了。