【前端】Vue和Vux开发WebApp日志三、完善gulp任务

转载请注明出处: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来处理

上一篇:POJ 2109 :Power of Cryptography


下一篇:理解class.forName()(转)