背景:公司背景管理系統的代碼是angularjs項目和vue項目在一起混搭,vue項目其實是屬于angularjs的子項目。如圖:
問題:之前在用svn釋出上線時,都是手動通過nvm執行兩次node版本切換,再執行兩次打包指令。遷移git要自動釋出,就要考慮将四條指令合并成一一條指令。
解決方案:
1. 老背景使用的gulp打包,node版本v6.9.2。如下,老背景gulp在打包時會執行一條clean的task,這條任務會将dist目錄下面的所有資源全部清除掉。
現在因為vue-admin的項目打包之後的靜态資源需要存放在dist/vue下面,是以clean這條任務就需要做個小改動,清除掉除了vue子項目之後的其他資源。如下
vue-admin項目的打包也需要做一些修改,如下 。
現在在編譯機器上通過固定的指令來編譯,其實這個不修改也沒關系。最開始修改這個主要是因為,送出代碼是需要送出dist目錄,本地自己去打好包,自己打包就會存在打包的先後問題,如果先打vue的包,再打angularjs的包,gulp就會把dist/vue目錄一起清掉。
2. 明确一下接下來要做的事情:想要達到的效果,在angularjs項目根目錄,執行npm run build:test,這條指令可包含以下所有操作:
(1) nvm use v6.9.2 -- node版本切換到6.9.2
(2) npm run gulp --執行angularjs項目打包
(3) cd vue-admin --進入到vue-admin項目目錄,準備打包編譯vue項目
(4) nvm use 10.16.2 -- node 版本切換到10.16.2
(5) npm run build:test 執行vue項目測試環境的打包
以上5步需要同步執行,因為打包的node版本是不一樣的。linux環境中 每條scripts使用 '&&' 則表示同步執行.
修改打包指令,如下
重點的兩條指令已經用紅框圈起來了,其中build:vue:test中的--prefix的作用就是指定目錄執行打包指令。
然後,build:test中的source ~/.nvm/nvm.sh這個如果不添加,會報nvm command not found的錯誤(即使你的nvm已經正常安裝),我在網上查到的原因是說 linux中執行shell腳本就需要執行前面的小段代碼,應該是指定nvm的安裝路徑的吧。。。
剩下npm run build:mirror和npm run build:online的解釋同上。