使用Gradle编译前端的项目

news2024/11/29 0:46:52

使用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)                     //需要先执行依赖安装命令
}

打包bootJar

只要执行backend项目的build 或者bootJar任务即可, 他会按照顺序先执行前端的编译打包命令, 然后复制到最终的jar包中。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2249408.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

多模态大型语言模型(MLLM)综述

目录 多模态大语言模型的基础 长短期网络结构(LSTM) 自注意力机制 基于Transformer架构的自然语言处理模型 多模态嵌入概述 多模态嵌入关键步骤 多模态嵌入现状 TF-IDF TF-IDF的概念 TF-IDF的计算公式 TF-IDF的主要思路 TF-IDF的案例 训练和微调多模态大语言模…

学习ASP.NET Core的身份认证(基于Cookie的身份认证3)

用户通过验证后调用HttpContext.SignInAsync函数将用户的身份信息保存在认证Cookie中,以便后续的请求可以验证用户的身份,该函数原型如下所示&#xff0c;其中properties参数的主要属性已在前篇文章中学习&#xff0c;本文学习scheme和principal的意义及用法。 public static …

C++设计模式-模板模式,Template Method

动机&#xff08;Motivation&#xff09; 在软件构建过程中&#xff0c;对于某一项任务&#xff0c;它常常有稳定的整体操作结构&#xff0c;但各个子步骤却有很多改变的需求&#xff0c;或者由于固有的原因&#xff08;比如框架与应用之间的关系&#xff09;而无法和任务的整…

Jenkins流水线 Allure JUnit5 自动化测试

目录 一、Jenkins Allure配置 1.1 安装Allure插件 1.2 安装Allure工具 1.3 配置测试报告路径 1.4 JenkinsFile 二、Jenkins 邮箱配置 2.1 安装Email Extension Plugin插件 2.2 邮箱配置 2.3 JenkinsFile 三、项目pom.xml 配置 3.1 引入allure-junit5依赖 3.2 引入m…

计算机网络 实验七 NAT配置实验

一、实验目的 通过本实验理解网络地址转换的原理和技术&#xff0c;掌握扩展NAT/NAPT设计、配置和测试。 二、实验原理 NAT配置实验的原理主要基于网络地址转换&#xff08;NAT&#xff09;技术&#xff0c;该技术用于将内部私有网络地址转换为外部公有网络地址&#xff0c;从…

shell脚本基础学习_总结篇(完结)

细致观看可以&#xff0c;访问shell脚本学习专栏&#xff0c;对应章节会有配图https://blog.csdn.net/2201_75446043/category_12833287.html?spm1001.2014.3001.5482 导语 一、shell脚本简介 1. 定义&#xff1a; 2. 主要特点&#xff1a; 3. shell脚本的基本结构 4. S…

ACL的原理与配置

ACL技术概述 ACL&#xff1b;访问控制列表 技术背景&#xff1a; 园区重要服务器资源被随意访问&#xff0c;容易泄露机密&#xff0c;造成安全隐患 病毒侵入内网&#xff0c;安全性降低 网络宽带被各类业务随意挤占&#xff0c;服务质量要求高的宽带得不到保障&#xff0…

AWS 新加坡EC2 VPS 性能、线路评测及免费注意事项

原文论坛给你更好的阅读讨论体验&#x1f490;&#xff1a; AWS 新加坡EC2 VPS 性能、线路评测及免费注意事项 - VPS - 波波论坛 引言 对于那些习惯薅“羊毛”的朋友来说&#xff0c; AWS 的 免费套餐 可能已经非常熟悉。这台vps是我用外币卡薅的免费的12个月的机器&#xf…

关于人工智能

关于人工智能 什么是人工智能 人工智能里面有智能两字&#xff0c;可不代表现在所谓的人工智能真的是智能的。 现在的人工智能是建立在学习上的&#xff0c;被称为机器学习&#xff08;machine learning&#xff09;&#xff0c;或者说是深度学习&#xff08;deep learning&…

MyBatis-缓存(一级缓存、二级缓存)

一、缓存&#xff08;Cache&#xff09; 1、定义&#xff1a;缓存是一种用于存储数据的硬件设备或存储空间&#xff08;缓存不是内存&#xff09;。 2、作用&#xff1a;减轻数据库压力&#xff0c;提高查询性能 3、实现原理&#xff1a;将从数据库中查询出来的对象/记录在使…

【Zookeeper】四,Zookeeper节点类型、通知、仲裁、会话

文章目录 Zookeeper的架构znode的版本Zookeeper的节点类型层级树状结构znode的不同类型 Zookeeper监视与通知通知的类型 Zookeeper的仲裁Zk的会话会话的生命周期 Zookeeper的架构 Zookeeper的服务器端运行两种模式&#xff1a;独立模式&#xff08;standalone&#xff09;和仲…

【mac】终端左边太长处理,自定义显示名称(terminal路径显示特别长)

1、打开终端 2、步骤 &#xff08;1&#xff09;修改~/.zshrc文件 nano ~/.zshrc&#xff08;2&#xff09;添加或修改PS1&#xff0c;我是自定义了名字为“macminiPro” export PS1"macminiPro$ "&#xff08;3&#xff09;使用 nano: Ctrl o &#xff08;字母…

macos 14.0 Monoma 修改顶部菜单栏颜色

macos 14.0 设置暗色后顶部菜单栏还维持浅色&#xff0c;与整体不协调。 修改方式如下&#xff1a;

树莓派3:64位系统串口(UART)使用问题的解决方法

前言 当我们要使用串口进行zigbee的短距离通信时,发现无法使用串口. 原因 树莓派3bCPU内部有两个串口,一个硬件串口(就是我们平时使用的UART),还有一个迷你串口(mini-uart),在老版本的树莓派中把硬件串口分配在GPIO上,可以单独使用.但是在新的树莓派中官方把硬件串口给了蓝牙…

前端Vue项目整合nginx部署到docker容器

一、通过Dockerfile整合nginx方法&#xff1a; 1&#xff0c;使用Vue CLI或npm脚本构建生产环境下的Vue项目。 npm run build or yarn build2&#xff0c;构建完成后&#xff0c;项目目录中会生成一个dist文件夹&#xff0c;里面包含了所有静态资源文件&#xff08;HTML、CSS…

《Vue零基础入门教程》第十课:属性绑定指令

往期内容 《Vue零基础入门教程》第一课&#xff1a;Vue简介 《Vue零基础入门教程》第二课&#xff1a;搭建开发环境 《Vue零基础入门教程》第三课&#xff1a;起步案例 《Vue零基础入门教程》第四课&#xff1a;应用实例 《Vue零基础入门教程》第五课&#xff1a;挂载 《…

计算机网络socket编程(5)_TCP网络编程实现echo_server

个人主页&#xff1a;C忠实粉丝 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 C忠实粉丝 原创 计算机网络socket编程(5)_TCP网络编程实现echo_server 收录于专栏【计算机网络】 本专栏旨在分享学习计算机网络的一点学习笔记&#xff0c;欢迎大家在评论区交…

【适配】屏幕拖拽-滑动手感在不同分辨率下的机型适配

接到一个需求是类似下图的3D多房间视角&#xff0c;需要拖拽屏幕 问题 在做这种屏幕拖拽的时候发现&#xff0c;需要拖拽起来有跟手的感觉&#xff0c;会存在不同分辨率机型的适配问题。 即&#xff1a;美术调整好了机型1的手感&#xff0c;能做到手指按下顶层地板上下挪动&…

C#调用C++ DLL方法之C++/CLI(托管C++)

托管C与C/CLI前世今生 C/CLI (C/Common Language Infrastructure) 是一种用于编写托管代码的语言扩展&#xff0c;它是为了与 .NET Framework 进行互操作而设计的。C/CLI 是 C 的一种方言&#xff0c;它引入了一些新的语法和关键字&#xff0c;以便更好地支持 .NET 类型和垃圾…

python excel接口自动化测试框架!

今天采用Excel继续写一个接口自动化测试框架。 设计流程图 这张图是我的excel接口测试框架的一些设计思路。 首先读取excel文件&#xff0c;得到测试信息&#xff0c;然后通过封装的requests方法&#xff0c;用unittest进行测试。 其中&#xff0c;接口关联的参数通过正则进…