Let’s talk about how to use Angular+Jenkins to display build versions

This article will take you to continue learning angular and learn how to use Jenkins combined with Angular to display the built version. I hope it will be helpful to everyone!

In Angular combined with Git Commit version processing At the end of the article, we are left with questions?️ Let’s concrete the problem

Combined with the Jenkins build, we can get the build information, such as the build number, and can it be backfilled to the page? [Related tutorial recommendations: "angular tutorial"]

is as follows:

Uha, we will modify it based on the original .

Add file build_info.json to the root directory.

{ }

You read that right, the content of build_info.json is {}

##build_info.json The file is generated when Jenkinsfile is built.

The specific implementation ideas are as follows:

• Execute

  Jenkinsfile during the build process to generate build_info.json file

• When packaging the project, consider whether to obtain the contents of the

  build_info.json file for different environments

For the convenience of demonstration, the environment here only considers the production environment.

The above steps are two simple steps. The most important point is

How to write the contents of the build_info.json file .

If you are not familiar with

Jenkinsfile related content, please read it in conjunction with the Jenkins Pipeline and Gitlab to implement automatic construction of Node projects article. At this time, your focus is on the content of the article Jenkinsfile, as follows:

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' 
            }
        }
    }
}

We have added a

stage to complete our build_info.jsonWriting of files.

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

Yeah, the idea is okay... Right?

Let’s go to the second step: read the content of

build_info.json, I intercept the version. js The content of the production environment:

// 引入生成的 build_info.json 文件
let buildInfo = require('./build_info.json');

if(config.env === 'production') { 
    // 获取构建的版本号，否则获取默认的版本
    versionObj.version = buildInfo.build_number || config.version 
}

After completing the above files, you can publish it to the relevant environment. If everything goes well, you can see the relevant version number on the page.

This article is not very related to

angular, it is just used to cooperate with jenkins. The next article is about using Angular for spa development, so stay tuned.

This article is reproduced from: https://juejin.cn/post/7081642981890981895

Author: Jimmy

For more programming-related knowledge, please visit :

Programming Video! !

The above is the detailed content of Let’s talk about how to use Angular+Jenkins to display build versions. For more information, please follow other related articles on the PHP Chinese website!