【前端】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来处理