Vue和Vux開發WebApp日誌四、繼續完善gulp任務,增加命令行參數
阿新 • • 發佈:2018-01-15
lan 目標 root option kconfig 基本上 ces ref platform
轉載請註明出處:http://www.cnblogs.com/shamoyuu/p/vue_vux_4.html
項目github地址:https://github.com/shamoyuu/vue-vux-iconan
上一章我們基本上完成了開發、打包的任務,但是還有很多問題,例如build.webapp會打包到dist/www文件夾中,我們希望是dist文件夾
我們這章來解決這個問題。
首先在項目根目錄新建一個文件options.json
{ "targets": { "mobile": { "environments": {"test": { "service": "http://meleong.duapp.com/psh/union" }, "production": { "service": "http://meleong.duapp.com/psh/union" } }, "platforms": { "android": {"cordovaVersion": "5.2.2" }, "ios": { "cordovaVersion": "4.3.0" } } }, "webapp": { "environments": { "test": { "service": "http://meleong.duapp.com/psh/union" },"production": { "service": "http://meleong.duapp.com/psh/union" } } } } }
這個文件存儲我們需要的配置信息
然後我們在gulpfile.js文件裏獲取它
const options = require(‘./options.json‘);
然後先放著,我們來獲取命令行參數。
獲取命令行參數需要用到minimist插件,來將process.argv數組轉化成一個對象
const minimist = require(‘minimist‘); //命令行參數配置 const argsOptions = { string: [‘e‘, ‘p‘, ‘t‘], default: { e: ‘production‘, //環境,可選值有【test】【production】 p: ‘android‘, //平臺,只在t為mobile時有效,可選值有【android】 t: ‘webapp‘ //目標,可選參數有【mobile】【webapp】 } }; const args = minimist(process.argv.slice(2), argsOptions);
這樣我們的配置文件和命令行參數都獲取到了,我們來繼續完善任務。
首先獲取這3個參數的值
const target = options.targets[args.t]; if(!target || !args.t){ throw(‘目標‘ + args.t + ‘不存在‘); } const env = options.targets[args.t].env[args.e]; if(!env || !args.e){ throw(‘環境‘ + args.e + ‘不存在‘); } let platform = ‘android‘; if(args.t == ‘mobile‘){ platform = options.targets[args.t].platforms[args.p]; if(!platform){ throw(‘平臺‘ + args.p + ‘不存在‘); } }
然後修改config/index.js文件,給exports添加一個屬性用來在target=webapp時使用
buildWebapp: { index: path.resolve(__dirname, ‘../dist/index.html‘), assetsRoot: path.resolve(__dirname, ‘../dist‘) }
然後我們修改gulpfile文件,添加一個target的環境變量
process.env.target = args.t;
這樣就能在其他文件中獲取當前的target了
但是需要把獲取webpackConfig對象的語句放到這一行下面。
然後我們修改build/webpack.prod.conf.js文件,首先判斷當前target是否為mobild
const isMobile = process.env.target == ‘mobile‘;
然後修改HtmlWebpackPlugin插件的filename
filename: isMobile ? config.build.index : config.buildWebapp.index
修改output的path
path: isMobile ? config.build.assetsRoot : config.buildWebapp.assetsRoot
好了,現在不同的target可以打包到不同的路徑下。
但是這還不夠,我們下一章來完善target。
Vue和Vux開發WebApp日誌四、繼續完善gulp任務,增加命令行參數