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

  • 相关阅读:
    Android使用SO库时要注意的一些问题
    android studio 生成引用arr
    android studio 改包名
    P2P通信原理与实现(C++)
    unity3d各种OpenFileDialog操作
    使用ffmpeg编码时,如何设置恒定码率,并控制好关键帧I帧间隔
    ffmpeg h264转h265
    照片人脸建模
    自动减面
    Unity3d 5.3.5使用sqlite3
  • 原文地址:https://www.cnblogs.com/shamoyuu/p/vue_vux_3.html
Copyright © 2020-2023  润新知