Jenkins 结合 Angular 展示构建版本

简介: 刚好最近在巩固相关的知识内容,以 angular 为主,那么咱就来参与下活动,希望能够坚持下去,顺便拿点小奖励。

image.png


一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第1天,点击查看活动详情


刚好最近在巩固相关的知识内容,以 angular 为主,那么咱就来参与下活动,希望能够坚持下去,顺便拿点小奖励。


I am In.


Angular 结合 Git Commit 版本处理 文末我们留下了疑问🤔️ 下面将问题具体化


结合 jenkins 构建,我们能够获取到构建的信息,比如构建号,回填到页面否?


如下:


image.png


Uha,我们在原基础上修改下。


根目录添加文件 build_info.json


{}
复制代码


你没看错,build_info.json 的内容就是 {}


build_info.json 文件是给 Jenkinsfile 构建的时候生成的。


具体的实现思路如下:


  1. 在构建的过程中执行 Jenkinsfile 生成 build_info.json 文件


  1. 在对项目打包的时候,针对不同的环境考虑是否获取 build_info.json 文件的内容


为了方便演示,这里的环境只考虑生产环境


上面的步骤简单两步,最重要的一点是如何写入 build_info.json 文件内容


如果你不熟悉 Jenkinsfile 相关内容,请结合Jenkins Pipeline 结合 Gitlab 实现 Node 项目自动构建文章来阅读。此时你关注的重点是文章 Jenkinsfile 的内容,如下:


pipeline {
    agent any
    tools { 
        nodejs "nodejs" 
    }
    stages {
        stage('Dependency') {
            steps {
                sh 'npm install'
            }
        }
        # 我们在此添加过一个 stage,见下面👇
        stage('Build') { 
            steps {
                sh 'npm run clean' 
                sh 'npm run build' 
            }
        }
    }
}
复制代码


我们添加过一个 stage 来完成我们对 build_info.json 文件的写入。


stage('Version') {
  steps {
    script {
      def amap = 
        'build_number': BUILD_NUMBER, # 构建号
        'job_name': JOB_NAME # 任务名称
      ]
      # 写入文件
      writeJSON file: WORKSPACE+'build_info.json', json: amap # WORKSPACE 根目录
    }
  }
}
复制代码


Yeah,思路还可以... Right?


下面进入第二步骤:读取 build_info.json 的内容,我截取 version.js 生产环境那部分的内容:


// 引入生成的 build_info.json 文件
let buildInfo = require('./build_info.json');
if(config.env === 'production') { 
    // 获取构建的版本号,否则获取默认的版本
    versionObj.version = buildInfo.build_number || config.version 
}
复制代码


完成上面的文件之后,你就可以发布到相关的环境,顺利的话,在页面上你可以看到相关的版本号了。


这篇文章跟 angular 的关联不是很大,只是用来打配合 jenkins。下一篇文章是关于使用 Angular 进行 spa 开发的内容,敬请期待。



相关文章
|
4月前
|
jenkins 持续交付 开发工具
利用Dockerfile自主构建Jenkins镜像
希望这个过程能善用你的野马般想象,把自己置身于和计算机的卓尔不凡的对话中,让编程的过程充满趣味。
165 36
|
5月前
|
jenkins Java Linux
Jenkins环境的部署及任务构建
以上就是Jenkins环境的部署及任务构建的全部内容。希望可以帮助你轻松上手Jenkins,让你的CI/CD之旅更加顺畅!
388 68
|
3月前
|
Ubuntu jenkins 机器人
在Jenkins上配置触发Ubuntu环境的图形用户界面(GUI)构建任务。
以上,这趟融合了技术与艺术的Jenkins配置之旅就告一段落了。记住,技术应当像艺术一样有趣和生动,这样才能激发出最大的创新和效率。
102 2
|
9月前
|
运维 jenkins Java
Jenkins 自动化局域网管控软件构建与部署流程
在企业局域网管理中,Jenkins 作为自动化工具,通过配置源码管理、构建及部署步骤,实现了高效、稳定的软件开发与部署流程,显著提升局域网管控软件的开发与运维效率。
169 5
|
11月前
|
运维 监控 jenkins
运维自动化实战:利用Jenkins构建高效CI/CD流程
【10月更文挑战第18天】运维自动化实战:利用Jenkins构建高效CI/CD流程
|
JavaScript UED 前端开发
JSF 富文本编辑器横空出世,如魔法神器开启震撼富文本输入之旅!
【8月更文挑战第31天】在现代Web应用中,用户常需输入带样式、颜色及图片等功能的富文本。为此,JSF可集成如CKEditor等富文本编辑器,提供强大输入体验。首先选择合适编辑器并下载引入库文件,使用`<textarea>`与JavaScript实例化编辑器。后台通过`value`属性获取内容。此外,还需配置编辑器选项、处理特殊字符和进行充分测试以确保稳定性和安全性,提升用户体验。
165 1
|
开发者 前端开发 开发框架
JSF与移动应用,开启全新交互体验!让你的Web应用轻松征服移动设备,让用户爱不释手!
【8月更文挑战第31天】在现代Web应用开发中,移动设备的普及使得构建移动友好的应用变得至关重要。尽管JSF(JavaServer Faces)主要用于Web应用开发,但结合Bootstrap等前端框架,也能实现优秀的移动交互体验。本文探讨如何在JSF应用中实现移动友好性,并通过示例代码展示具体实现方法。使用Bootstrap的响应式布局和组件可以确保JSF页面在移动设备上自适应,并提供友好的表单输入和提交体验。尽管JSF存在组件库较小和学习成本较高等局限性,但合理利用其特性仍能显著提升用户体验。通过不断学习和实践,开发者可以更好地掌握JSF应用的移动友好性,为Web应用开发贡献力量。
127 1
|
开发框架 前端开发 JavaScript
使用Angular构建大型企业级应用的技术探索
【8月更文挑战第11天】Angular凭借其强大的组件化开发能力、模块化系统、丰富的生态系统和静态类型检查特性,成为了构建大型企业级应用的理想选择。通过设计良好的架构、使用Angular CLI、组件化开发实践、合理利用服务、性能优化以及严格测试和调试等方法,可以高效地构建出高质量、可维护、可扩展的企业级应用。未来,随着Angular技术的不断发展和完善,相信它将在企业级应用开发领域发挥更加重要的作用。
|
前端开发 Java UED
JSF遇上Material Design:一场视觉革命,如何让传统Java Web应用焕发新生?
【8月更文挑战第31天】在当前的Web开发领域,用户体验和界面美观性至关重要。Google推出的Material Design凭借其独特的动画、鲜艳的颜色和简洁的布局广受好评。将其应用于JavaServer Faces(JSF)项目,能显著提升应用的现代感和用户交互体验。本文介绍如何通过PrimeFaces等组件库在JSF应用中实现Material Design风格,包括添加依赖、使用组件及响应式布局等步骤,为用户提供美观且功能丰富的界面。
176 0
|
开发者 iOS开发 C#
Uno Platform 入门超详细指南:从零开始教你打造兼容 Web、Windows、iOS 和 Android 的跨平台应用,轻松掌握 XAML 与 C# 开发技巧,快速上手示例代码助你迈出第一步
【8月更文挑战第31天】Uno Platform 是一个基于 Microsoft .NET 的开源框架,支持使用 C# 和 XAML 构建跨平台应用,适用于 Web(WebAssembly)、Windows、Linux、macOS、iOS 和 Android。它允许开发者共享几乎全部的业务逻辑和 UI 代码,同时保持原生性能。选择 Uno Platform 可以统一开发体验,减少代码重复,降低开发成本。安装时需先配置好 Visual Studio 或 Visual Studio for Mac,并通过 NuGet 或官网下载工具包。
1377 0

推荐镜像

更多