Vue和Vux開發WebApp日誌四、繼續完善gulp任務，增加命令列參數

標籤：.json   nan   output   logs   blank   gets   語句   項目   uil   

轉載請註明出處：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任務，增加命令列參數