【前端】Vue和Vux開發WebApp日志一、整合vue+cordova和webpack+gulp

轉載請注明出處：http://www.cnblogs.com/shamoyuu/p/vue_vux.html

 

項目github地址：https://github.com/shamoyuu/vue-vux-iconan

首先新建一個cordova項目，然后添加安卓環境

cordova create iconan meleong.duapp.com iconan
cd iconan
cordova platform add android

 

在這個目錄下有一個www文件夾，cordova打包的時候會把它打包進去，打開app后，會自動以file://協議載入index.html文件

所以我們在這里寫我們自己的html頁面，然后cordova負責打包成app。

然后跟cordova項目同級，新建一個vue項目

vue init webpack iconan-web

然后一路回車，把幾個代碼檢查和單元測試選N

然后執行npm run build，就可以把文件都打包到dist文件夾下。

我們打開dist文件夾，發現有個index.html文件，雙擊打開就可以預覽我們的vue-app了。

然后我們把dist文件夾下的所有文件都復制到上面cordova項目的www文件夾下，
然后連上手機，執行cordova run android，就可以把我們的vue項目打包的app安裝到手機上調試了。

當然我們不能每次都這么麻煩，這簡直要了命了，我們把build的路徑調整到cordova的www文件夾。

打開config/index.js
修改build下的配置

index: path.resolve(__dirname, '../../iconan/www/index.html'),
assetsRoot: path.resolve(__dirname, '../../iconan/www'),
assetsSubDirectory: '',
assetsPublicPath: '',

 

這樣我們先在iconan-web項目里build，然后在iconan項目里run android就可以了。
不過還是有點麻煩，我們繼續用gulp繼續整合這一步。

首先添加gulp

npm install gulp --save-dev

然后新建一個gulpfile.js文件，我們先寫一個打包任務（這個文件里的大部分代碼都是直接照搬build.js文件里的）。

'use strict'

require('./build/check-versions')();

const gulp = require('gulp');

process.env.NODE_ENV = 'production';

const ora = require('ora');
const rm = require('rimraf');
const path = require('path');
const chalk = require('chalk');
const webpack = require('webpack');
const config = require(process.cwd() + '/config');
const webpackConfig = require(process.cwd() + '/build/webpack.prod.conf');

const minimist = require('minimist');
const gutil = require('gulp-util');
const src = process.cwd() + '/src';
const assets = process.cwd() + '/dist';

gulp.task('pack', function () {
    console.info(config.build);
    let spinner = ora('正在打包，請稍后...');
    spinner.start();
    
    rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
        if (err) throw err;
        webpack(webpackConfig, (err, stats) => {
            spinner.stop();
            if (err) throw err;
            process.stdout.write(stats.toString({
                    colors: true,
                    modules: false,
                    children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.
                    chunks: false,
                    chunkModules: false
                }) + '\n\n');
            
            if (stats.hasErrors()) {
                console.log(chalk.red('  Build failed with errors.\n'));
                process.exit(1);
            }
            
            console.log(chalk.cyan('  Build complete.\n'));
            console.log(chalk.yellow(
                '  Tip: built files are meant to be served over an HTTP server.\n' +
                '  Opening index.html over file:// won\'t work.\n'
            ))
            
            //↑↑↑上面的基本上都是build.js文件里的內容
            
        })
    })
});

 

我們希望在gulp執行完webpack的任務后，繼續執行cordova的打包任務，所以我們先在iconan-web項目里新建一個cordova文件夾，然后把iconan文件夾里所有內容復制進來（記得清空www文件夾）。

之所以這么做，是因為我們的項目會打包成混合應用或者webapp，所以我們在需要打包成混合應用的時候，就把cordova文件夾里的內容復制過來，然后build后再打包成apk。

我們當然也可以把cordova的插件單獨取出來，在需要打包成app的時候，重新添加平台，然后把插件添加進去，這樣項目體積會更小，但是在很多時候非常不方便，所以我放棄了。

我們先添加2個gulp的任務

//清空dist文件夾
gulp.task('clean', function () {
    return gulp
        .src('dist')
        .pipe(clean());
});
//復制cordova文件夾到dist文件夾
gulp.task('copy', ['clean'], function () {
    return gulp
        .src('cordova/**/*')
        .pipe(gulp.dest('dist'));
});

然后我們執行gulp copy，會發現cordova文件夾里的內容都復制到dist文件夾了

 

然后我們修改上面提到的cofig/index.js文件，把它build的路徑指向我們新的www文件夾

index: path.resolve(__dirname, '../dist/www/index.html'),
assetsRoot: path.resolve(__dirname, '../dist//www'),

 

然后給pack任務添加前置任務copy，執行gulp pack后，就會先清空dist文件夾，然后復制cordova文件夾里的內容到dist，然后由webpack來build項目，build到dist文件夾下的www文件夾下。

然后我們安裝shelljs，用它來執行cd dist和cordova run android等命令

npm install shelljs --save-dev

 

然后在gulp的pack任務最底下，添加下面的代碼，來自動打包調試app

//↑↑↑上面的都是build.js文件里的內容
console.info('開始打包APP，請稍后...');
shelljs.cd('./dist');
shelljs.exec('cordova run android');
shelljs.cd(__dirname);
done();

 

然后執行gulp pack任務，就會自動build項目，打包成app。

至此，我們的整合已經完成，項目目錄如下

 

 

當然，這里面還有很多問題，后面的幾章會一個一個解決。