這兩天折騰了一下 Jenkins 持續集成，因爲公司使用本身搭建的 svn 服務器來進行代碼管理，所以這裏 Jenkins 是針對 svn 服務器來進行的配置，Git 配置基本一致，後面也介紹了下針對 Github 管理的項目的 Jenkins 配置html
以前項目每次修改以後都須要本地 npm run build 一次手動發佈到服務器上方便測試和產品查看，有了Jenkins持續集成以後只要 svn 或者 git 提交以後就會自動打包，很方便，這次記錄以備後詢。前端
聲明：vue
-
後面的項目地址與打包地址都是使用
my-demo，自行修改；node -
另外還有路徑等，根據本身狀況自行修改；nginx
1. 安裝
1.1 安裝 Nginx
能夠直接去官網下直接下載，解壓縮 start nginx就可使了，經常使用命令：git
start nginx # 啓動 nginx -s reload # 修改配置後從新加載生效 nginx -s reopen # 從新打開日誌文件 nginx -t # 配置文件檢測是否正確
1.2 安裝Jenkins
從官網下載文件安裝以後，我這裏安裝到 C:\Jenkins（Mac 不用在乎），默認端口 8080，這時候瀏覽器訪問 localhost:8080 就能訪問 Jenkins 首頁，這裏注意若是不安裝到 C 盤根目錄有些插件安裝會出錯github
這裏會讓你去某個地方找一個初始密碼文件打開並填到下面的密碼框裏，驗證成功以後進入頁面，選擇 Installsuggested plugins 推介安裝的插件web
插件都安裝完成以後進入用戶登陸界面，設定用戶名、密碼及郵箱。shell
而後提示 Jenkins is ready！→ Start using Jenkins ~npm
注意這裏由於要使用node的命令來執行建立後操做，因此還須要安裝插件：NodeJSPlugin、 Deployto container、 Github、 Postbuild task
這裏順便記錄一下啓動和關閉Jenkins服務的命令行：
-
net start jenkins // 啓動Jenkins服務 -
net stop jenkins // 中止Jenkins服務
2. 建立svn項目的Jenkins任務
2.1 新建
左邊欄新建一個任務，輸入一個任務名稱，這裏隨便寫一個
2.2 配置
General
這裏纔是重頭戲，進入剛剛建立的任務的配置頁面的 General
丟棄舊的構建就是檢測到新的版本以後把舊版本的構建刪除
源碼管理
這裏採用的是 svn 來管理代碼，
構建觸發器
這裏的 Poll SCM 表示去檢測是否更新構建的頻率， ***** 表示每分鐘， H**** 表示每小時
構建
cd cd C:\Jenkins\workspace\my-demo node -v npm -v cnpm i npm run build
構建後操做
安裝插件 Postbuild task 後，能夠在 增長構建後操做步驟中選擇 Postbuild task選項，增長構建後執行的script，具體也能夠參考文章：jenkins部署maven項目構建後部署前執行shell腳本 - https://blog.csdn.net/minebk/article/details/73294785
我這裏的 Logtext 是 Buildcomplete
Script：
rmdir /q/s C:\nginx-1.14.0\html\my-demo xcopy /y/e/i C:\Jenkins\workspace\my-demo\my-demo C:\nginx-1.14.0\html\my-demo
複製生成好的文件到Nginx的目錄下，路徑自行修改
3. 建立Github項目的Jenkins任務
Jenkins 不只能夠持續集成 svn 項目，Git 項目也是能夠的，這裏以 Github 上的項目爲例：
其餘配置和上面一章同樣
這樣若是 github 有新的 push 請求，都會自動化部署到以前的服務器上，能夠說很方便了。
試一試
配置好了咱們試一試，在剛剛 github 項目中隨便 commit 一版到 github ：
稍等片刻去本地 Jenkins 地址 http://localhost:8080/job/vue-element-template/就能看到 Jenkins 已經在構建中了
50秒以後：
構建成功！構建用時 54 秒，如今訪問本地服務器地址 http://localhost:8282/vue-element-template，已經能看到編譯後的發佈版本啦~
若是你但願發佈的是測試版本，能夠自行修改構建後操做的 script
網上的帖子大多深淺不一，甚至有些先後矛盾，在下的文章都是學習過程當中的總結，若是發現錯誤，歡迎留言指出~
參考：
使用Jenkins自動編譯部署web應用
Jenkins+github 前端自動化部署
配置Jenkins郵件通知
jenkins部署maven項目構建後部署前執行shell腳本
文章來源： SHERlocked93