如何配置Gradle实现文件更新时自动调用Vite重建UI?
实现UI文件自动构建同步的Gradle方案
优化基础任务(确保增量构建与跨平台兼容)
先调整现有任务的输入输出定义,让Gradle能精准识别变更,同时优化命令适配多平台环境:
def uiProjectDir = file("../ui") def uiDistDir = file("../ui/dist") // 执行npm install的任务 tasks.register('npmInstall', Exec) { workingDir uiProjectDir inputs.file("${uiProjectDir}/package.json") inputs.file("${uiProjectDir}/package-lock.json") // 新增锁文件作为输入,避免不必要的重复install outputs.dir("${uiProjectDir}/node_modules") // 自动适配Windows/WSL/Linux环境 commandLine System.getProperty('os.name').toLowerCase().contains('windows') ? 'npm.cmd' : 'npm', 'install' } // 构建UI的任务 tasks.register('buildUi', Exec) { workingDir uiProjectDir inputs.dir("${uiProjectDir}/src") inputs.dir("${uiProjectDir}/node_modules") inputs.file("${uiProjectDir}/package.json") inputs.file("${uiProjectDir}/vite.config.js") // 监听Vite配置文件变更 outputs.dir(uiDistDir) dependsOn npmInstall commandLine System.getProperty('os.name').toLowerCase().contains('windows') ? 'npm.cmd' : 'npm', 'run', 'build' } // 复制UI构建产物到静态资源目录 tasks.register('copyUiBuild', Copy) { dependsOn buildUi from uiDistDir into "src/main/resources/static" // 显式保留文件相对路径,确保前端资源引用正常 preserve { include '**/*' } } processResources.dependsOn copyUiBuild
添加UI文件监听任务
创建watchUi任务,利用Gradle的FileSystemWatcher实现文件变更自动触发构建同步:
tasks.register('watchUi') { def watcher = services.get(FileSystemWatcher) // 监听需要触发构建的核心文件/目录 watcher.addSourceDirectory(uiProjectDir.dir("src")) watcher.addSourceFiles( uiProjectDir.file("package.json"), uiProjectDir.file("package-lock.json"), uiProjectDir.file("vite.config.js") ) doFirst { println "开始监听UI文件变化..." } doLast { watcher.start() // 保持任务持续运行,直到手动终止(Ctrl+C) Thread.sleep(Long.MAX_VALUE) } // 变更触发逻辑:自动执行构建与产物同步 watcher.addChangeListener { println "检测到UI文件变更,开始重建同步..." copyUiBuild.execute() println "UI构建产物已同步至静态资源目录" } }
可选:配合Spring Boot自动刷新
如果是Spring Boot项目,可通过spring-boot-devtools实现无需重启应用的资源刷新:
- 在
build.gradle添加依赖:
dependencies { developmentOnly 'org.springframework.boot:spring-boot-devtools' }
- 在
application.properties配置:
spring.devtools.restart.enabled=true spring.devtools.restart.additional-paths=src/main/resources/static
使用步骤
- 启动Spring Boot应用(如执行
./gradlew bootRun) - 新开终端执行监听任务:
./gradlew watchUi
此后修改UI目录下的文件,Gradle会自动触发构建并同步产物到静态资源目录,配合DevTools的话,浏览器刷新即可看到最新效果,无需重启应用。
内容的提问来源于stack exchange,提问作者Jackie
相关产品推荐
相关产品推荐

