转载请注明出处：http://www.cnblogs.com/shamoyuu/p/vue_vux_3.html
项目github地址：https://github.com/shamoyuu/vue-vux-iconan
我们继续完善我们常用的几个任务。
首先把在安卓手机上运行的任务独立出来
'cordova.run.android': () => {
shelljs.cd('./dist');
shelljs.exec('cordova run android');
shelljs.cd(__dirname);
}
然后修改run.android任务，在最后面添加cordova.run.android
'run.android': () => {
runSequence(
'clean.dist',
'copy.cordova',
'webpack.build',
'cordova.run.android'
)
}
执行一下，跟原来执行的一样一样。
然后我们新建一个build.android方法，来打出apk的包，不过在这之前，我们先要完成2件事
首先我们现在来生成一个安卓的证书文件iconan.keystore。
在CMD里执行
keytool -genkey -alias iconan -keyalg RSA -validity 20000 -keystore iconan.keystore
然后设置一些秘密、姓名、公司名、地址等等的信息就可以了，最后生成的iconan.keystore文件可能在java/bin文件夹下，也可能在C:\Users\[用户名]下。然后把这个文件复制到我们项目的根目录。
然后在项目根目录新建一个build.json文件，用来存放打包的一些信息
{
"android": {
"debug": {
"keystore": "./iconan.keystore",
"storePassword": "123456",
"alias": "iconan",
"password" : "123456",
"keystoreType": ""
},
"release": {
"keystore": "./iconan.keystore",
"storePassword": "123456",
"alias": "iconan",
"password" : "123456",
"keystoreType": ""
}
}
}
然后开始添加cordova.build.android的gulp任务
'cordova.build.android': () => {
shelljs.cd('./dist');
shelljs.exec('cordova build android --buildConfig=../build.json');
shelljs.cd(__dirname);
}
然后添加build.android任务
'build.android': () => {
runSequence(
'clean.dist',
'copy.cordova',
'webpack.build',
'cordova.build.android'
)
}
可以看到build.android和run.android非常相似，只有最后一个任务不同，这就是使用gulp和runSequence比较好的方面，可以自己组合出不同的任务。
然后我们添加dev任务，用来开发的时候用
首先添加gulp-shell插件，这个跟shelljs不太一样，我们用来它执行一些其他指令
npm install gulp-shell --save-dev
然后在gulpfile.js文件引入
const shell = require('gulp-shell');
然后给tasks添加dev，不过它不再是个function，顺便把它当成default方法
//默认任务
'default': ['dev'],
//开发模式
'dev': shell.task([
'webpack-dev-server --inline --progress --config build/webpack.dev.conf.js'
]),
但是这样启动会报错
Module build failed: Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin, refer to https://github.com/webpack/extract-text-webpack-plugin for the usage example
根据报错提示，访问https://github.com/webpack/extract-text-webpack-plugin 可以得到解决办法
打开webpack.dev.conf.js文件，添加extract-text-webpack-plugin的引用
const ExtractTextPlugin = require('extract-text-webpack-plugin');
然后devWebpackConfig的plugins添加
new ExtractTextPlugin("styles.css")
其他不用动，然后删除package.json文件里的scripts属性，因为我们现在完全可以用gulp来处理