使用Gradle编译前端的项目
前言
最近的项目都是使用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
gradlekts_26">根项目(parent-project)的 settings.gradle.kts
这个文件用于声明多项目构建中的子项目,内容如下:
rootProject.name = "parent-project"
include("backend", "frontend")
上述代码定义了根项目的名称为 parent-project,并将 backend 和 frontend 作为子项目包含进来。
gradlekts_36">后端项目(backend)的 build.gradle.kts
正常的进行kts的脚本配置,但是需要新增配置两个Task, 来处理前端的逻辑,
val copyVueDist by tasks.registering(Copy::class) {dependsOn(":web:buildVue") // 同时依赖Vue模块的buildVue任务,确保先打包Vuefrom("../web/dist") // 源目录,即Vue项目打包后的dist目录,注意相对路径into("build/resources/main/static") //bootJar包的静态资源目录,会把前端的打包内容复制过来
}tasks.getByName("processResources") { //bootJar打包过程中处理静态资源的task, dependsOn(copyVueDist) //需要依赖上面的复制task
}
gradlekts_53">前端项目(frontend)的 build.gradle.kts
前端项目的kts配置
import com.github.gradle.node.npm.task.NpmTaskgroup = "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) //需要先执行依赖安装命令
}
打包bootJar
只要执行backend项目的build 或者bootJar任务即可, 他会按照顺序先执行前端的编译打包命令, 然后复制到最终的jar包中。