【前端】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。
至此，我们的整合已经完成，项目目录如下
当然，这里面还有很多问题，后面的几章会一个一个解决。
