背景:公司后台管理系统的代码是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的解释同上。