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 开发的内容,敬请期待。



相关文章
|
7月前
|
前端开发 jenkins 持续交付
新的centos7.9安装docker版本的jenkins2.436.1最新版本-前端项目发布(五)
新的centos7.9安装docker版本的jenkins2.436.1最新版本-前端项目发布(五)
188 1
|
25天前
|
运维 jenkins Java
Jenkins 自动化局域网管控软件构建与部署流程
在企业局域网管理中,Jenkins 作为自动化工具,通过配置源码管理、构建及部署步骤,实现了高效、稳定的软件开发与部署流程,显著提升局域网管控软件的开发与运维效率。
40 5
|
2月前
|
运维 监控 jenkins
运维自动化实战:利用Jenkins构建高效CI/CD流程
【10月更文挑战第18天】运维自动化实战:利用Jenkins构建高效CI/CD流程
|
7月前
|
资源调度 jenkins 持续交付
jenkins 自动安装nodejs16.16.0版本报错处理
jenkins 自动安装nodejs16.16.0版本报错处理
774 0
|
4月前
|
开发框架 前端开发 JavaScript
使用Angular构建大型企业级应用的技术探索
【8月更文挑战第11天】Angular凭借其强大的组件化开发能力、模块化系统、丰富的生态系统和静态类型检查特性,成为了构建大型企业级应用的理想选择。通过设计良好的架构、使用Angular CLI、组件化开发实践、合理利用服务、性能优化以及严格测试和调试等方法,可以高效地构建出高质量、可维护、可扩展的企业级应用。未来,随着Angular技术的不断发展和完善,相信它将在企业级应用开发领域发挥更加重要的作用。
|
4月前
|
前端开发 Java UED
JSF遇上Material Design:一场视觉革命,如何让传统Java Web应用焕发新生?
【8月更文挑战第31天】在当前的Web开发领域,用户体验和界面美观性至关重要。Google推出的Material Design凭借其独特的动画、鲜艳的颜色和简洁的布局广受好评。将其应用于JavaServer Faces(JSF)项目,能显著提升应用的现代感和用户交互体验。本文介绍如何通过PrimeFaces等组件库在JSF应用中实现Material Design风格,包括添加依赖、使用组件及响应式布局等步骤,为用户提供美观且功能丰富的界面。
53 0
|
4月前
|
JavaScript UED 前端开发
JSF 富文本编辑器横空出世,如魔法神器开启震撼富文本输入之旅!
【8月更文挑战第31天】在现代Web应用中,用户常需输入带样式、颜色及图片等功能的富文本。为此,JSF可集成如CKEditor等富文本编辑器,提供强大输入体验。首先选择合适编辑器并下载引入库文件,使用`<textarea>`与JavaScript实例化编辑器。后台通过`value`属性获取内容。此外,还需配置编辑器选项、处理特殊字符和进行充分测试以确保稳定性和安全性,提升用户体验。
46 0
|
4月前
|
开发者 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 或官网下载工具包。
439 0
|
4月前
|
容器 iOS开发 Linux
震惊!Uno Platform 响应式 UI 构建秘籍大公开!从布局容器到自适应设计,带你轻松打造跨平台完美界面
【8月更文挑战第31天】Uno Platform 是一款强大的跨平台应用开发框架,支持 Web、桌面(Windows、macOS、Linux)及移动(iOS、Android)等平台,仅需单一代码库。本文分享了四个构建响应式用户界面的最佳实践:利用布局容器(如 Grid)适配不同屏幕尺寸;采用自适应布局调整 UI;使用媒体查询定制样式;遵循响应式设计原则确保 UI 元素自适应调整。通过这些方法,开发者可以为用户提供一致且优秀的多设备体验。
199 0
|
4月前
|
前端开发 开发者 C#
深度解析 Uno Platform 中的 MVVM 模式:从理论到实践的全方位指南,助你轻松掌握通过 C# 与 XAML 构建高效可维护的跨平台应用秘籍
【8月更文挑战第31天】本文详细介绍如何在优秀的跨平台 UI 框架 Uno Platform 中实施 MVVM(Model-View-ViewModel)模式,通过一个简单的待办事项列表应用演示其实现过程。MVVM 模式有助于分离视图层与业务逻辑层,提升代码组织性、易测性和可维护性。Uno Platform 的数据绑定机制使视图与模型间的同步变得高效简便。文章通过构造 `TodoListViewModel` 类及其相关视图,展示了如何解耦视图与模型,实现动态数据绑定及命令处理,从而提高代码质量和开发效率。通过这一模式,开发者能更轻松地构建复杂的跨平台应用。
64 0