真▪一行代碼完成從前端代碼build到部署線上

在經歷了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操做，把最新的代碼拉下來，就完成了部署。