Vue and Vux Development WebApp Log Four, continue to improve the Gulp task, add command line parameters

Reprint Please specify source: http://www.cnblogs.com/shamoyuu/p/vue_vux_4.html

Project GitHub Address:Https://github.com/shamoyuu/vue-vux-iconan

The previous chapter we basically completed the development, packaging tasks, but there are many problems, such as Build.webapp will be packaged into the Dist/www folder, we want to be Dist folder

We are going to solve this problem in this chapter.

First create a new file in the project root directory 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"                }            }        }    }}

This file stores the configuration information we need

And then we get it in the Gulpfile.js file.

Const OPTIONS = require ('./options.json ');

Then let's go ahead and let's get the command-line arguments.

Getting command-line arguments requires the Minimist plug-in to convert the PROCESS.ARGV array into an object

ConstMinimist = require ('minimist');//command line parameter configurationConstArgsoptions = {    string: ['e','P','T'],    default: {e:'Production',//environment, optional values are "test" "Production "P:'Android',//platform, only valid when T is mobile, optional value is "Android"T:'WebApp' //target, optional parameters are "mobile" "WebApp"    }};Constargs = Minimist (Process.argv.slice (2), argsoptions);

So that our configuration files and command-line parameters are captured, we continue to refine the task.

First get the values of these 3 parameters

Consttarget =OPTIONS.TARGETS[ARGS.T];if(!target | |!args.t) {    Throw('Target'+ ARGS.T +'does not exist');}Constenv =OPTIONS.TARGETS[ARGS.T].ENV[ARGS.E];if(!env | |!ARGS.E) {    Throw('Environment'+ ARGS.E +'does not exist');} Let platform='Android';if(ARGS.T = ='Mobile') {Platform=OPTIONS.TARGETS[ARGS.T].PLATFORMS[ARGS.P]; if(!platform) {        Throw('Platform'+ ARGS.P +'does not exist'); }}

Then modify the Config/index.js file to add a property to exports to use when Target=webapp

Buildwebapp: {    '.. /dist/index.html'),    '. /dist')}

Then we modify the Gulpfile file to add a target environment variable

Process.env.target = ARGS.T;

This will enable you to get the current target in other files.

However, the statement that gets the Webpackconfig object needs to be placed below this line.

Then we modify the Build/webpack.prod.conf.js file, first of all to determine whether the current target is Mobild

Const ' Mobile ';

Then modify the filename of the Htmlwebpackplugin plugin

Filename:ismobile? Config.build.index:config.buildWebapp.index

Modifying the path of output

Path:ismobile? Config.build.assetsRoot:config.buildWebapp.assetsRoot

OK, now the different target can be packaged into different paths.

But that's not enough, and we're going to refine target in the next chapter.

Vue and Vux Development WebApp Log Four, continue to improve the Gulp task, add command line parameters