使用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
根项目(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) //需要先执行依赖安装命令
}
打包bootJar
只要执行backend项目的build 或者bootJar任务即可, 他会按照顺序先执行前端的编译打包命令, 然后复制到最终的jar包中。