在經歷了6,7個專案同時開工,頻繁釋出測試 ,不得不學會一點偷懶的小技巧來提高效率了,所以這篇文章要講的就是如何更加優化釋出流程。
工作以來,經歷了build後,然後用FileZilla
上傳伺服器完成部署。再到前端打包後 ,在build
倉庫執行git push
,後端在自動部署。後端的自動部署的確簡化了很多操作,不過對於前端來說 ,每次釋出還需要去build倉庫執行push操作,特別是釋出頻繁的時候,難免會減低效率 ,這種重複操作還是讓指令碼來執行比較合適。所以接下來就是圍繞如何只需要執行npm run build
就完成專案釋出。
(本文所講的都是基於windows系統和node環境,各個系統的指令碼語言可能有所誤差,基本思路不變)
本文分為兩部分,第一部分主要講的是前端的打包釋出的優化過程 ,第二部分簡單介紹一下後端的自動部署原理。
一:前端釋出優化
首先要明確的是目前大部分前端專案的build過程都是基於node環境,所以優化流程的主要思路就是利用node和作業系統互動,呼叫系統指令碼完成檔案copy和git操作。在這我們要明白在執行npm run build
的時候發生了什麼 ,npm run build
只是一個語法糖 ,
在package.json
裡面可以看到其實是用node 執行了build/build.js
檔案,下面我們就來改寫build
檔案,為了方便對比,我在這貼一下改寫前後的build檔案,改寫前:改寫後:
我們其實不用全部讀懂build.js
裡面做了什麼 ,我們只需要知道再build成功後在何處執行我們的指令碼就可以了, 可以很清楚的看到webpack打包後的回撥函式,找到位置後,我們需要引入children_process
,關於這個模組這裡說明兩點:
1.children_process
這個模組提供了衍生子程式的功能,熟悉shell操作童鞋可以利用這個模組做一些有意思的事情,我們這兒主要利用children_process.exec(commad,options,callback)
, 主要功能就是建立一個shell,然後在shell裡執行命令。執行完成後,將stdout、stderr作為引數傳入回撥方法。想要詳細瞭解到童鞋可以去node文件看一看
2.就是關於process.argv
, 這個提供了獲取命令列引數的方法,這個引數就是在執行node命令時後面接的引數 ,比如執行 node build.js a b c
, 那麼process.argv[1]
就是build.js ,process.argv[2]
就是a,以內類推。
知道了這兩點後,我們就可以設計我們的自定義命令了 , 因為優化的目的就是簡化操作 ,所以在build的時候我們接上我們的自定義引數,這關係到後面我們的指令碼編寫,我設計的命令是 npm run build (push)(commit) (branch)
,這裡括號包裹是為了方便表達這是一個自定義變數,實際是沒有括號的,三個引數的意思如下:
1.push
表示是否打包完直接push到遠端;
2.commit
表示push到遠端執行git commit -m ‘(提交資訊)'
,的這裡的提交的資訊;
3.branch
表示git push origin (branch)
的那條分支 , 意味著是釋出到正式伺服器還是測試伺服器
自定義完引數後我們在回撥裡面利用exec()
執行我們的指令碼
這時候我們編寫我們的指令碼了 ,我們新建一個autopush.bat
的檔案 ,放在我們的根目錄就可以了,指令碼內容很簡單,大概就是執行了複製貼上刪除和git操作,指令碼如下
cd D:\build\test /* 進入build的倉庫*/
git checkout %2 /* 切換build倉庫的分支*/
rd /s/q D:\build\test\static /* 刪除build倉庫的static資料夾*/
xcopy D:\source\test\dist D:\build\test /E/I/Y /*從原始碼倉庫的打包後dist的資料夾拷貝並覆蓋掉build倉庫的檔案*/
git add .
git commit -m %1 /*提交程式碼*/
git push origin %2 /*push到遠端,後端執行自動部署*/
cd D:\myFolder\31abc_admin複製程式碼
這裡說明三點:
1.先執行刪除build倉庫的static,在拷貝並覆蓋 , 是因為改動後每次打包後的js檔名都會變動 , 不刪除的話,不會覆蓋重名檔案,所以會導致js檔案累積;
2.window
指令碼引數是通過%1
獲得的,例如%1
就是獲取第一個引數,%2
就是獲取第二個引數,這樣就可以獲取我們在build.js
中執行指令碼的時候傳入的關於commit和branch
的引數了。
3.關於刪除和拷貝中引數的意思 ,
rd /s/q
/S 表示刪除該目錄下所有遍歷的子目錄和檔案
/Q 刪除目錄時不提示確認,直接刪除
xcopy 後面的/E/I/Y
/E 複製所有子目錄,包括空目錄。
/I 如果“Source”是一個目錄或包含萬用字元,而“Destination”不存在,“xcopy”會假定“destination”指定目錄名並建立一個新目錄。然後,“xcopy”會將所有指定檔案複製到新目錄中。預設情況下,“xcopy”將提示您指定“Destination”是檔案還是目錄
/y 禁止提示確認要覆蓋已存在的目標檔案。
複製程式碼
通過以上操作我們就可以 ,通過npm run build push fix master
一行命令完成打包到push的操作了, 這個時候後端要是設定了自動部署的話,那麼,就直接上線了。
二:後端自動部署
關於自動部署的文章,網上已經一大把了,在這兒為了配合這篇文章就簡單介紹了自動部署的原理 , 自動部署的關鍵就在於webhook
,主流的程式碼託管平臺都有這個功能,包括coding , github
等,在倉庫裡可以設定,以github為例,大概在這個位置
這裡可以填寫一個自己伺服器的介面地址和一個seret
用於驗證 , 填寫完了倉庫會監聽push
操作 , 一旦有push
操作,webhook
就會發出一個post
請求到你設定的介面,然後在伺服器端執行指令碼進行git pull
操作,把最新的程式碼拉下來,就完成了部署。