说说在 IDEA 中如何使用 DevTools 与 LiveReload 实现热部署(包括代码与静态资源)

1,818 阅读2分钟

1 配置 Intellij IDEA

首先在 Intellij IDEA 中,开启项目自动构建选项:

然后打开 Maintenance 选项卡,快捷键为 Ctrl + Alt + Shift + /:

输入快捷键后,选择 Registry,进入注册表,找到 compiler.automake.allow.when.app.running,勾选它:

这时 Java 代码发生变化时,IDEA 就会自动重新编译。

2 Spring Boot DevTools

Spring Boot 的 DevTools 为我们提供了一些便利的开发期工具,包括以下这些内容:

  1. 当代码变更后应用会自动重启(这在 IDEA 中需要进行额外配置,上一小节有具体描述);
  2. LiveReload 服务器配合 LiveReload 浏览器插件,能够在模板 、 图片 、 样式表 、 JavaScript等发生变化时,自动刷新浏览器,这样就可以免去手动刷新的动作;
  3. 自动禁用模板框架(比如 Thymeleaf 或 FreeMarker)缓存;
  4. 如果使用 H2 数据库,那么可以通过 DevTools 内置的 H2 控制台,看到相关数据。

安装 DevTools 很简单,我们只需要在 pom.xml 中,配置好 DevTools 的依赖:

 <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <scope>runtime</scope>
            <optional>true</optional>
        </dependency>

DevTools 运行时会自动启动一个 LiveReload 服务器:

3 安装 LiveReload Chrome 插件

网上搜索 LiveReload ocx 类型的 Chrome 浏览器插件安装包并下载下来,然后把文件类型从 ocx 改为 zip(直接安装会报程序包无效),拖入 Chrome 浏览器的扩展程序页,进行安装。

安装时,记得先打开“开发者模式”。安装成功后,就会在扩展程序中看到 LiveReload :

4 热部署

使用 LiveReload Chrome 插件时,需要点击右上角的 LiveReload 图标,让其打开 WebSocket 监听 LiveReload 服务器。

在调试器中,我们可以看到 LiveReload Chrome 插件是通过 WebSocket 实现监听 LiveReload 服务器的:

这时,如果静态资源或者前端视图(比如模板)发生变化,就会通过 LiveReload 实现自动刷新浏览器啦๑乛◡乛๑