现在有两个模块，server和ui，server是后端SpringBoot服务，ui是前端node项目，我现在希望将node打包结果输出到server的打包结果当中，以便通过SpringBoot即可访问前端页面。

项目结构如下：

project
  --- build.gradle.kts
  --- setting.gradle.kts
  --- server
    --- build.gradle.kts
  --- ui
    --- build.gradle.kts

1.基于Gradle构建前端node模块(React/Vue)

可以在工程下使用npm工具创建ui前端工程，下面以React工程举例，Vue工程同理。

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"

node {
    // 自动下载node, 不依赖操作系统的node
    download.set(true)
    fastNpmInstall.set(true)
    version.set("20.17.0")
    npmVersion.set("10.8.2")
    pnpmVersion.set("9.12.0")
}

// 打包任务
tasks.register<PnpmTask>("build") {
    println(System.getenv("PATH"))
    dependsOn(tasks.named("pnpmInstall"))
    pnpmCommand.addAll("build")
    shouldRunAfter(tasks.named("clean"))
}

// clean任务
tasks.register<Delete>("clean") {
    delete(layout.buildDirectory)
}

2.server后端模块(SpringBoot)

在server模块，新增如下的配置，需要将前端资源打包到后端的jar资源目录下，我们需要干预processResources任务，这个任务专门处理打包的资源文件：

// 处理资源文件的编译打包, 把前端打包文件打包到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前端工程的页面。