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