在 Jenkins 上实现 webpack 打包

3,796 阅读2分钟

Jenkins是什么?

Jenkins 是 开源的 、提供友好操作界面的 持续集成( CI ) 工具,集成了 Git 插件,起源于 Hudson。主要用于持续、自动的构建项目。

一句话理解 Jenkins

Jenkins 可以为我们 自动拉取  github 上代码,帮我们 编译 、 打包 、 执行 、 部署 的自动化工具。

知识点 GET

CD、CI概念

CI概念:

持续集成(Continuous integration)是一种软件开发实践,即团队开发成员经常集成它们的工作,通过每个成员每天至少集成一次,也就意味着每天可能会发生多次集成。每次集成都通过自动化的构建(包括编译,发布,自动化测试)来验证,从而尽早地发现集成错误

CD概念:

持续部署(continuous deployment)是通过自动化的构建、测试和部署循环来快速交付高质量的产品。

pipeline(流水线) 概念

Jenkins 从根本上来讲是一种支持多种自动化模式的自动化引擎。
那么pipeline 是在Jenkins 上添加了一套强大的自动化工具,支持 从简单的连接集成到全面的连续输送pipeline  的用例。可以基于它实现更为负载的建模场景。
pipeline 目前支持 Java / Node.js / Javascript / Ruby / Python / PHP

如何实现 webpack 打包

  1. 编辑 Jenkins Job 配置项

image.png

  1. 找到 pipeline 配置,选择 Pipeline script 后写入脚本

image.png

node {
    def folderName = "${projectName}-${version}"
    sh "rm -rf ${folderName}"
    sh "mkdir -p ${folderName}"

    stage('Project get Code ') {
        dir("${folderName}")
        {
            checkout scm
        }

        echo "拉取代码成功"
    }

    stage('Main Project Build') {
        
        dir("${folderName}")
        {
            sh "sed -i 's/{version}/${version}/g' package.json"
            sh "cp ${projectName}/mainProjectBuild.sh ./"
            sh "sed -i 's/{version}/${version}/g' mainProjectBuild.sh"
            sh "sh mainProjectBuild.sh"
			
            echo "编译 & 打包完成"
        }
    }
  
    stage('Results') {
        echo "发布成功"
    }
}

pipeline 语法 注意

  • Scripted Pipeline从顶部顺序执行
  • node {} 最外层必须是node节点,声明工作空间
  • def folderName = "${projectName}-${version}"  声明局部变量
  • sh "rm -rf ${folderName}"  通过shell命令,执行 rm -rf xx 。只有在命令返回零退出代码时才会继续,任何非零退出代码整个Pipeline将判定为部署失败。
  • ${folderName} 变量可以通过这样类似shell的方式获取。
  • stage('Project get Code '){} stage是一个阶段的语法,括号中是阶段名称。脚本从node开始,按顺序向下执行。遇到一个stage就是一个阶段。
  • dir("xx") 更换执行目录。
  • checkout scm 是Jenkins 固定获取代码的方法,会输出Check out from version control
  • echo "拉取代码成功" 输出文字,给出当前进度信息

附 mainProjectBuild.sh

npm install
npm run build
zip -r {version}.zip dist