如今的前端項目已不像之前直接寫完代碼，扔到服務器直接運行了。免不了安裝依賴，執行build過程，然后再將打包后的代碼上傳到服務器，可能還需要更改配置文件啥的。如此多的步驟嚴重影響開發的日常劃水時間。所以jenkins自動化部署少不了。

聽說這個老頭可以幫你做很多事

直接進入正題，登錄進入jenkins后臺，在Dashboard左側菜單新建任務

選擇流水線任務類型，輸入任務名稱，可以是項目名稱，然后確認，進入配置頁面，該頁面有四個Tab

General

主要是一些基本的配置項，可不填

構建觸發器

主要是觸發構建任務的條件配置，有的時候比如你想在你提交代碼的時候就觸發構建，或者合并代碼到主分支的時候觸發，可以通過gitee WebHook來配置生效，不需要自動觸發構建的可以不需要理會

高級項目選項

（忽略）

流水線

這個是主要的內容，編寫自定義的Pipeline script，類似于shell腳本

pipeline {agent anyenvironment {CODE_REPOSITORY = 'git@gitee.com:argusai/cloth-client-manager-app.git'}stages { stage('拉取代碼') {steps {echo "fetch code from ${CODE_REPOSITORY}"deleteDir()git "${CODE_REPOSITORY}"}}stage('打包') {steps {echo 'package.....'sh "yarn install"sh "yarn build"}}stage('部署代碼') {steps {echo ''sh "cp -rf ./dist/* /data/service/cloth-cloud/cloth-client-manager-app"sh "/data/service/cloth-cloud/cloth-client-manager-app-start.sh"}}}}

整個構建過程，被我們自定義為三步，首先從git或者gitee拉取最新的代碼到jenkins服務器，拉取之前先執行deleteDir()刪除之前的代碼目錄；

第二步是執行命令編譯打包的過程，yarn install 安裝項目依賴，然后build出包，一般在項目根目錄dist下面

第三步的過程就是將dist里面打包后的代碼拷貝到服務器nginx配置的項目目錄，并且執行一個shell腳本，目的是拷貝一份生產環境的配置到項目目錄，（有的時候配置文件不方便打包進項目，隨時修改的需要）如果項目部署和jenkins不在一個服務器，也可以通過其它的方式同步到生產服務器。

為了公司的內部協同，還可以在這里做很多事，例如配置釘釘機器人通知，將打包后的信息同步到工作群里。

最后配置好任務之后，試一下點擊立即構建，可以清晰的看見每一步的完成進度

如果哪一步出錯了，還可以點擊log來查找錯誤的輸出日志進行跟蹤。

?

總結

以上是生活随笔為你收集整理的前端jenkins打包编译发布项目流程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。