Jenkins上新建前端自动化打包步骤流程讲解

主题

Jenkins是一个自动化的自动化的打包工具,关于更多的讲解,这儿不过过多的介绍,请移步官网,Jenkins,也有中文版的链接 Jenkins中文.

第一步:下面的步骤是在jenkins上没有项目的进行新建,有的话可以直接进行使用

步骤一: 在jenkins上界面进行新建任务

步骤二: 取名称按照规范为ftp-web-xxx-public(xxx为你的项目名称)

步骤三:

步骤四: 可以把下面的代码复制出来改一下对应需要修改的地方 里面(xxxxxxxx)就是需要新建项目的时候进行更改

	//pipeline 顶层 
	//any 在任何可用的agent上执行Pipeline或stage
    agent any
	//environment 自定义的环境变量
    environment {
        JOB_WORKSPACE = "${env.WORKSPACE}"
        PROGRAM_ID = "xxxxxxxx"  //你打包出来的项目名称
    }
	//不允许并行执行Pipeline,可用于防止同时访问共享资源等
    options {
        disableConcurrentBuilds()
    }
    stages {
		//部署流程：从SVN或者Git上拉取项目程序代码
        stage('svn checkout') {
            steps {
                sh 'rm -rf xxxxxxxx*'//打包的项目名称 这儿表示先删除之前打包的文件
                sh 'rm -rf node_modules*'
                git branch: '${BRANCH}', credentialsId: 'gezhanbin', url: 'http://xxxxxxxx.git'//这儿是你的项目的git地址
                
            }
        }
        // 部署流程：前端node编译
		stage('node build') {
            agent {
            docker {
                image 'node:10.15.3'
                args '-u 0:0 -v /var/jenkins_home/.npm:/root/.npm'
               }
            }
            steps {
                sh 'rm -rf package-lock.json'
                sh 'npm install cnpm -g --registry=https://registry.npm.taobao.org'
                sh 'cd $JOB_WORKSPACE && cnpm install'
                sh 'cd $JOB_WORKSPACE && npm run build'
				//sh 'cd $JOB_WORKSPACE && npm run dist'
            }
        }
		//部署流程：从SVN或者Git上拉取项目程序代码
        stage('package zip') {
            steps {
				sh 'git checkout $BRANCH'
				sh 'rm -rf jenkins docker chart'
				sh 'rm -rf version.txt'
				sh 'touch version.txt && echo "branch：${BRANCH}" > version.txt'
				sh 'git log -n 1 >> version.txt'
				sh 'CREATER_NAME=`git log -n 1 --pretty=format:"发版人:%an"` && echo "${CREATER_NAME}" >> version.txt'
				sh 'mv version.txt $PROGRAM_ID/'
				
				sh 'rm -rf start.bat'
				
				sh 'rm -rf start.sh'
				
				
				sh 'rm -rf stop.sh'
				
				//sh 'mkdir ../ftp-${PROGRAM_ID}'
				//sh 'mv ./* ../ftp-${PROGRAM_ID}'
				//sh 'mv ../ftp-${PROGRAM_ID} ./${PROGRAM_ID}'
				sh 'PUBLISH_NAME=`git log -n 1 --pretty=format:"${PROGRAM_ID}_20%ad_${BRANCH}_%h" --date=format:"%y%m%d%H%M"` && zip -r ${PUBLISH_NAME}.zip ${PROGRAM_ID}'
				
            }
        }
		// 部署流程：上传ftp
		stage('upload ftp') {
			steps {
				withCredentials([usernamePassword(credentialsId: 'user_for_103_ftp', passwordVariable: 'password', usernameVariable: 'username')]) {
					sh 'PUBLISH_NAME=`git log -n 1 --pretty=format:"${PROGRAM_ID}_20%ad_${BRANCH}_%h" --date=format:"%y%m%d%H%M"` && lftp $username:$password@$FTP_103_IP:$FTP_103_PORT -e "cd ${FILE_PATH} && put ${PUBLISH_NAME}.zip; exit"'
				}
			}
		}
		
    }
	
}

这样子就可以新建一个新的自动化打包的工具;

(二)有已建好的自动化工具的打包步骤(示例项目举例)

打包完成后成功的结果是这样的

(三)如果需要打印镜像的继续的看第三步

完成之后的zip包和镜像

有问题的随时提问,有需要的随时补充