使用Gradle编译前端的项目

server/2024/12/2 7:11:13/

使用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

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包中。


http://www.ppmy.cn/server/146645.html

相关文章

猴子吃桃问题

题目描述 猴子吃桃问题。猴子第1天摘下若干个桃子&#xff0c;当即吃了一半&#xff0c;还不过瘾&#xff0c;又多吃了一个。第2天早上又将剩下的桃子吃掉一半&#xff0c;又多吃了一个。以后每天早上都吃了前一天剩下的一半零一个。到第10天早上想再吃时&#xff0c;就只剩一个…

155. TWEEN.JS点按钮,相机飞行靠近观察设备

实际开发的的时候&#xff0c;一个较大的三维场景&#xff0c;有很多不同的设备或物品&#xff0c;你可能希望通过UI按钮点击切换到不同视角&#xff0c;观察某个区域&#xff0c;或者说放大观察某个特定的物品或设备。 按钮 切换相机位置和视角的按钮 <div class"p…

queue 和 Stack

import scala.collection.mutable //queue:队列.排队打饭.... //特点&#xff1a;先进先出 //Stack:栈 //特点&#xff1a;先进后出 class ob5 { def main(args: Array[String]): Unit { val q1 mutable.Queue(1) q1.enqueue(2)//入队 q1.enqueue(3)//入队 q1.enqueue(4)…

技术文档创作指南:打造卓越专业精准蓝图之道

&#x1f9d1; 博主简介&#xff1a;CSDN博客专家&#xff0c;历代文学网&#xff08;PC端可以访问&#xff1a;https://literature.sinhy.com/#/literature?__c1000&#xff0c;移动端可微信小程序搜索“历代文学”&#xff09;总架构师&#xff0c;15年工作经验&#xff0c;…

网络安全中级试题

中级选择题 什么是DDoS攻击的主要目标&#xff1f; A. 窃取敏感数据 B. 禁止用户访问目标系统 C. 恶意软件传播 D. 伪装身份进行欺诈 在网络安全中&#xff0c;"端口扫描"通常用于什么目的&#xff1f; A. 查找系统漏洞 B. 提高网络速度 C. 加密通信 D. 防火墙配置…

vue3中是如何实现双向数据绑定的

在 Vue 3 中&#xff0c;双向数据绑定主要通过 v-model 指令实现。v-model 是一个语法糖&#xff0c;它内部实际上结合了 v-bind 和 v-on 指令来实现数据的双向绑定。下面详细介绍 Vue 3 中双向数据绑定的实现原理和使用方法。 双向数据绑定的基本原理 v-bind 指令&#xff1…

小程序-基于java+SpringBoot+Vue的戏曲文化苑小程序设计与实现

项目运行 1.运行环境&#xff1a;最好是java jdk 1.8&#xff0c;我们在这个平台上运行的。其他版本理论上也可以。 2.IDE环境&#xff1a;IDEA&#xff0c;Eclipse,Myeclipse都可以。推荐IDEA; 3.tomcat环境&#xff1a;Tomcat 7.x,8.x,9.x版本均可 4.硬件环境&#xff1a…

【人工智能】用Python和Scikit-learn构建集成学习模型:提升分类性能

《Python OpenCV从菜鸟到高手》带你进入图像处理与计算机视觉的大门! 集成学习(Ensemble Learning)是通过组合多个弱学习器提升模型性能的机器学习方法,广泛应用于分类、回归及其他复杂任务中。随机森林(Random Forest)和梯度提升(Gradient Boosting)是集成学习的两种…