当前位置：首页 > article >正文

使用Gradle编译前端的项目

article 2024/12/2 12:30:33

使用Gradle编译前端的项目

前言
- 项目结构
- 根项目（parent-project）的 settings.gradle.kts
- 后端项目（backend）的 build.gradle.kts
- 前端项目（frontend）的 build.gradle.kts
- 打包bootJar

前言

最近的项目都是使用Gradle来开发和编译的。由于个人项目前后端都有用到，我想放在一个项目中，于是有了这篇文章。
我前端使用的Vue，后端使用kotlin , 框架使用的SpringBoot。

项目结构

项目分两个子项目，前端和后端。项目结构大概如下：

parent-project
├── backend (Spring Boot 后端项目根目录)
│   ├── build.gradle.kts
│   ├── src
│   │   └── main
│   │       ├── java (Java 源代码目录)
│   │       └── resources (资源文件目录，包含配置文件等)
│   └── settings.gradle.kts
└── frontend (前端项目根目录，这里假设是 Vue 项目)
    ├── build.gradle.kts
    └── src
        ├── assets
        ├── components
        └── main.js

根项目（parent-project）的 settings.gradle.kts

这个文件用于声明多项目构建中的子项目，内容如下：

rootProject.name = "parent-project"
include("backend", "frontend")

上述代码定义了根项目的名称为 parent-project，并将 backend 和 frontend 作为子项目包含进来。

后端项目（backend）的 build.gradle.kts

正常的进行kts的脚本配置，但是需要新增配置两个Task，来处理前端的逻辑,

val copyVueDist by tasks.registering(Copy::class) {
    dependsOn(":web:buildVue") // 同时依赖Vue模块的buildVue任务，确保先打包Vue
    from("../web/dist")        // 源目录，即Vue项目打包后的dist目录，注意相对路径
    into("build/resources/main/static")     //bootJar包的静态资源目录，会把前端的打包内容复制过来
}

tasks.getByName("processResources") {    //bootJar打包过程中处理静态资源的task，  
    dependsOn(copyVueDist)              //需要依赖上面的复制task
}

前端项目（frontend）的 build.gradle.kts

前端项目的kts配置

import com.github.gradle.node.npm.task.NpmTask

group = "com.github.blanexie.magic.web"
version = "0.0.1"

plugins {
    id("com.github.node-gradle.node") version "7.0.2"    //使用这个插件可以进行npm的调用
}

val buildTask = tasks.register<NpmTask>("buildVue") {  //定义一个buildVue的任务，用来打包前端项目
    args.set(listOf("run", "build-only" ))          //前端的打包命令
    dependsOn(tasks.npmInstall)                     //需要先执行依赖安装命令
}