现在有两个模块,server和ui,server是后端服务,ui是前端node项目,我现在希望将node打包结果输出到server的打包结果当中。
项目结构如下:
--- server
------ build.gradle.kts
--- ui
------ build.gradle.kts
1.ui前端node模块(react/vue)
可以在工程下新增ui前端工程。
npx create-react-app ui
在项目的setting.gradle.kts当中引入ui模块
include(":ui")
接着在ui前端模块的build.gradle.kts当中,可以使用Gradle的com.github.node-gradle.node
插件进行npm打包,配置的脚本内容如下:
import com.github.gradle.node.pnpm.task.PnpmTask
plugins {
// 注意: 配置好npm之后需要使用命令"./gradlew --stop"重启gradle进程, 不然可能会出现gradle找不到环境变量的情况
id("com.github.node-gradle.node") version "7.1.0"
}
description = "ui"
// 打包任务npm build
tasks.register<PnpmTask>("build") {
pnpmCommand.addAll("build")
shouldRunAfter(tasks.named("clean"))
}
// clean任务
tasks.register<Delete>("clean") {
delete(layout.buildDirectory)
}
2.server后端模块(spring-boot)
在server模块,新增如下的配置,需要将前端资源打包到后端的resources目录下:
// 处理资源文件的编译打包, 把前端打包文件打包到jar包当中
tasks.named<ProcessResources>("processResources") {
from(project(":ui").layout.buildDirectory) {
into("static")
}
// 依赖ui模块的build任务
dependsOn(project(":ui").tasks.named("build"))
}
3.构建项目
可以使用如下代码命令进行项目的构建:
./gradlew clean build -x test
接着启动项目,可以在访问127.0.0.1:8080
查看到ui前端工程的页面。
评论