【前端】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 </span>=><span style="color: rgba(0, 0, 0, 1)"> {
</span><span style="color: rgba(0, 0, 255, 1)">if</span> (err) <span style="color: rgba(0, 0, 255, 1)">throw</span><span style="color: rgba(0, 0, 0, 1)"> err;
webpack(webpackConfig, (err, stats) </span>=><span style="color: rgba(0, 0, 0, 1)"> {
spinner.stop();
</span><span style="color: rgba(0, 0, 255, 1)">if</span> (err) <span style="color: rgba(0, 0, 255, 1)">throw</span><span style="color: rgba(0, 0, 0, 1)"> err;
process.stdout.write(stats.toString({
colors: </span><span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)">,
modules: </span><span style="color: rgba(0, 0, 255, 1)">false</span><span style="color: rgba(0, 0, 0, 1)">,
children: </span><span style="color: rgba(0, 0, 255, 1)">false</span>, <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> If you are using ts-loader, setting this to true will make TypeScript errors show up during build.</span>
chunks: <span style="color: rgba(0, 0, 255, 1)">false</span><span style="color: rgba(0, 0, 0, 1)">,
chunkModules: </span><span style="color: rgba(0, 0, 255, 1)">false</span><span style="color: rgba(0, 0, 0, 1)">
}) </span>+ '\n\n'<span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 0, 255, 1)">if</span><span style="color: rgba(0, 0, 0, 1)"> (stats.hasErrors()) {
console.log(chalk.red(</span>' Build failed with errors.\n'<span style="color: rgba(0, 0, 0, 1)">));
process.exit(</span>1<span style="color: rgba(0, 0, 0, 1)">);
}
console.log(chalk.cyan(</span>' Build complete.\n'<span style="color: rgba(0, 0, 0, 1)">));
console.log(chalk.yellow(
</span>' Tip: built files are meant to be served over an HTTP server.\n' +
' Opening index.html over file:// won\'t work.\n'<span style="color: rgba(0, 0, 0, 1)">
))
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">↑↑↑上面的基本上都是build.js文件里的内容</span>
})})
});
我们希望在 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。
至此，我们的整合已经完成，项目目录如下
当然，这里面还有很多问题，后面的几章会一个一个解决。