现在有两个模块,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前端工程的页面。