Intellij IDEA - 实现项目的热部署3（使用LiveReload实现静态资源热部署）

之前我写过文章介绍如何通过 spring-boot-devtools 模块实现项目的自动编译重启（点击查看），其实 devtools 默认还嵌入了 LiveReload 服务器，可以解决静态文件（html 页面、图片、css 样式、js 脚本等）的热部署问题。即在资源发生变化时自动触发浏览器更新（不会重启项目）。下面通过样例进行演示。

1，项目中安装 devtools

首先我们需要在项目中添加 devtools 依赖，并对 IDE 进行一些相关设置。具体可以参考我之前写的这篇文章：

• Intellij - 实现项目的热部署1（使用spring-boot-devtools实现自动编译重启）

2，浏览器安装 LiveReload 插件

（1）LiveReload 支持 Chrome、Firefox 以及 Safari。这里以 Chrome 为例，在 Chrome 应用商店搜索 LiveReload 进行安装：

（2）安装后在 Chrome 右上角会有个 LiveReload 图标（此时中间圆点为空心的）

3，测试使用

（1）首先启动 SpringBoot 项目，可以看到 LiveReload 服务已经启动（端口为 35729）

（2）接着我们在浏览器中打开项目的页面，然后单击浏览器右上角的 LiveReload 按钮（此时中间圆点变成实心），开启 LiveReload 连接。此时当静态资源发生改变时，浏览器就会自动加载。

注意：只有单独打开一个项目时，每次编辑保存后，浏览器那边才会自动加载更新。
如果打开多个项目（即使其它项目没有启动），编辑保存后浏览器是不会自动加载更新的。必须手动编译一下（点击 idea 右上角小锤子图标），浏览器那边才会自动更新（不用刷新浏览器）