Groovy 操作 HTML 文檔

. 問題描述

端工程化的今天，版本發(fā)布已經(jīng)成為開發(fā)中的重要一環(huán)。

很多項目開發(fā)中都開始使用jenkins來做自動發(fā)版工作。

不過jenkins復雜的安裝配置比較不容易上手，而且很多環(huán)境是不適用安裝jenkins來做自動發(fā)版的。

我模擬Jenkins邏輯寫了一個node版本的自動發(fā)版的程序。帶大家了解一下自動發(fā)版的基本原理。同時，如果需要的朋友也可以直接上手來使用。

倉庫地址和使用方式

使用方式：

> git clone https://github.com/shb190802/node-jenkins.git
> cd node-jenkins
> npm install
> node app.js

瀏覽器訪問YOUR_IP_ADDRESS:3011

需求分析

首先分析，如果要做到自動發(fā)版需要實現(xiàn)哪些功能。

從相應倉庫下載要發(fā)布的分支代碼
編譯代碼設置npm源安裝依賴執(zhí)行編譯命令
將編譯后的代碼發(fā)布到服務器指定目錄

技術實現(xiàn)

1、從相應倉庫下載要發(fā)布的分支

此處使用download-git-repo，來完成從相應倉庫下載要發(fā)布的分支代碼。放置在一個臨時目錄下。

// 示例方法
let repository = `direct:${this.repo}#${this.branch}`
download(repository, destination, options, callback)

2、編譯代碼

編譯代碼我們使用child_process.exec來執(zhí)行命令行命令來執(zhí)行

// 示例方法
const COMMAND = ['npm config set registry http://registry.npm.taobao.org/', 'npm install', 'npm run build']

for (let i = 0, len = COMMAND.length; i < len; i++) {
    await this.exec(COMMAND[i]) // 需要在async函數(shù)中
}

3、將編譯后代碼發(fā)送到服務器對應目錄

這里使用到ssh2-sftp-client

// 示例方法
let client = new Sftp()
console.log('連接web服務器'.yellow)
await client.connect({
    host: this.host,
    username: this.username,
    password: this.password
})
console.log(`mkdir ${this.remotePath}`.green)
await client.mkdir(this.remotePath, true)
console.log(`傳輸文件【${localPath}】===>【${this.remotePath}】`.green)
await client.uploadDir(localPath, this.remotePath) // 將本地文件夾傳輸?shù)竭h程
console.log('文件傳輸完畢'.green)
client.end()

4、項目優(yōu)化

前三步已經(jīng)完成一個自動下載、打包、發(fā)布的流程。
我們可寫出一個js文件,使用命令行工具【node+filename.js】來做到本機自動發(fā)版。
但是項目還有很多可以優(yōu)化的地方。

(1)將編譯選項抽象成配置項

將配置選項從代碼中抽象出來，我們將發(fā)版程序做的更加獨立。

{
    /** build config */
    name: '聊天室 客戶端',
    repo: 'https://github.com/shb190802/chat.git', // 倉庫地址
    branch: 'master', // 編譯分支 默認master
    srcPath: 'client', // 項目編譯目錄，一般是vue.config.js所在目錄
    buildCommand: ['npm config set registry http://registry.npm.taobao.org/', 'npm install', 'npm run build'],
    outputPath: 'server/static/html', // 編譯目錄 默認是srcPath下 dist
    /* host config */
    remotePath: '/usr/local/nginx/html/html', //YOUR_REMOTE  web項目遠程目錄 注意，由于會提前清空遠程目錄。請慎重填寫地址
    host: '', // YOUR_HOST  web服務器IP地址
    username: '', // YOUR_NAME
    password: '' // YOUR_PWD
}

（2）重復使用node_modules

node的依賴安裝，占到了打包的很大一部分時間。
我在這里處理方式是：
從倉庫下載代碼之前，先判斷是否已經(jīng)有過安裝的node_modules目錄。
如果有，就將它轉(zhuǎn)移到一個臨時目錄。等待代碼下載完成之后。在轉(zhuǎn)移到編譯目錄下。

5、使用koa創(chuàng)建一個server端，給局域網(wǎng)內(nèi)其他同事提供打包服務

即時完成了前邊步驟，我們也還只是一個單機版的發(fā)版程序。
最后，我們使用koa建立一個簡單的website。發(fā)布局域網(wǎng)內(nèi)的同事。
靜態(tài)頁面和serviceApi的開發(fā)，此處就不在贅述了。
最終項目效果：

兩天折騰了一下 Jenkins 持續(xù)集成，由于公司使用自己搭建的 svn 服務器來進行代碼管理，因此這里 Jenkins 是針對 svn 服務器來進行的配置，Git 配置基本一致，后面也介紹了下針對 Github 管理的項目的 Jenkins 配置

之前項目每次修改之后都需要本地 npm run build 一次手動發(fā)布到服務器上方便測試和產(chǎn)品查看，有了Jenkins持續(xù)集成之后只要 svn 或者 git 提交之后就會自動打包，很方便，此次記錄以備后詢。

聲明：

后面的項目地址與打包地址都是使用 my-demo，自行修改；
另外還有路徑等，根據(jù)自己情況自行修改；

1、安裝

1.1 安裝 Nginx

可以直接去官網(wǎng)下直接下載，解壓縮 start nginx就可以使了，常用命令：

start nginx # 啟動
nginx -s reload # 修改配置后重新加載生效
nginx -s reopen # 重新打開日志文件
nginx -t # 配置文件檢測是否正確

1.2 安裝Jenkins

從官網(wǎng)下載文件安裝之后，我這里安裝到 C:Jenkins（Mac 不用在意），默認端口 8080，這時候瀏覽器訪問 localhost:8080 就能訪問 Jenkins 首頁，這里注意如果不安裝到 C 盤根目錄有些插件安裝會出錯

這里會讓你去某個地方找一個初始密碼文件打開并填到下面的密碼框里，驗證成功之后進入頁面，選擇 Installsuggested plugins 推介安裝的插件

插件都安裝完成之后進入用戶登錄界面，設定用戶名、密碼及郵箱。

然后提示 Jenkins is ready！→ Start using Jenkins ~

注意這里因為要使用node的命令來執(zhí)行創(chuàng)建后操作，所以還需要安裝插件：NodeJSPlugin、 Deployto container、 Github、 Postbuild task

這里順便記錄一下啟動和關閉Jenkins服務的命令行：

net start jenkins // 啟動Jenkins服務
net stop jenkins // 停止Jenkins服務

2、創(chuàng)建svn項目的Jenkins任務

2.1 新建

左邊欄新建一個任務，輸入一個任務名稱，這里隨便寫一個

2.2 配置

General

這里才是重頭戲，進入剛剛創(chuàng)建的任務的配置頁面的 General

丟棄舊的構建就是檢測到新的版本之后把舊版本的構建刪除

源碼管理

這里采用的是 svn 來管理代碼，

構建觸發(fā)器

這里的 Poll SCM 表示去檢測是否更新構建的頻率， ***** 表示每分鐘， H**** 表示每小時

構建

cd cd C:Jenkinsworkspacemy-demo
node -v
npm -v
cnpm i
npm run build

構建后操作

安裝插件 Postbuild task 后，可以在增加構建后操作步驟中選擇 Postbuild task 選項，增加構建后執(zhí)行的script，具體也可以參考文章：jenkins部署maven項目構建后部署前執(zhí)行shell腳本 - https://blog.csdn.net/minebk/article/details/73294785

我這里的 Logtext 是 Buildcomplete

Script：

rmdir /q/s C:ginx-1.14.0htmlmy-demo
xcopy /y/e/i C:Jenkinsworkspacemy-demomy-demo C:ginx-1.14.0htmlmy-demo

復制生成好的文件到Nginx的目錄下，路徑自行修改

3、創(chuàng)建Github項目的Jenkins任務

Jenkins 不僅可以持續(xù)集成 svn 項目，Git 項目也是可以的，這里以 Github 上的項目為例：

其他配置和上面一章一樣

這樣如果 github 有新的 push 請求，都會自動化部署到之前的服務器上，可以說很方便了。

試一試

配置好了我們試一試，在剛剛 github 項目中隨便 commit 一版到 github ：

稍等片刻去本地 Jenkins 地址 http://localhost:8080/job/vue-element-template/ 就能看到 Jenkins 已經(jīng)在構建中了

50秒之后：

構建成功！構建用時 54 秒，現(xiàn)在訪問本地服務器地址 http://localhost:8282/vue-element-template，已經(jīng)能看到編譯后的發(fā)布版本啦~

如果你希望發(fā)布的是測試版本，可以自行修改構建后操作的 script

在線咨詢

上一篇：干貨：實現(xiàn)數(shù)據(jù)可視化的幾個工具選擇（工具+編程語言）
下一篇：簡單小程序：登錄頁面（html）

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務商