【前端】Vue和Vux开发WebApp日志二、优化gulp任务

转载请注明出处：http://www.cnblogs.com/shamoyuu/p/vue_vux_2.html

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

上一章我们简单地整合了一个gulp任务，但是略显混乱，在任务多，而且任务互相调用的情况下容易出问题。

我们优化的思路是，写一个对象，列出所有任务，如果一个任务需要调用多个子任务，那也为它写一个任务，然后用run-sequence来执行（比如下面的'run.android'），它会顺序执行任务。

所以首先我们安装run-sequence

npm install run-sequence --save-dev

然后我们修改gulpfile.js

'use strict'

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

const shelljs = require('shelljs');

const gulp = require('gulp');
const clean = require('gulp-clean');

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';

const runSequence = require('run-sequence');

const tasks = {
//清空dist文件夹
'clean.dist': () => {
return gulp
.src('cordova/**/*')
.pipe(gulp.dest('dist'));
},
//复制cordova文件夹到dist文件夹
'copy.cordova': () => {
return gulp
.src('cordova/**/*')
.pipe(gulp.dest('dist'));
},
'webpack.build': (done) => {
let spinner = ora('正在打包，请稍后...');
spinner.start();
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文件里的内容
console.info('开始打包APP，请稍后...');
shelljs.cd('./dist');
shelljs.exec('cordova run android');
shelljs.cd(__dirname);
done();
})

},
'run.android': () => {
runSequence(
'clean.dist',
'copy.cordova',
'webpack.build'
)
}
};

//将任务添加到gulp中
for (let name in tasks) {
gulp.task(name, tasks[name]);
}

然后我们调用gulp run.android，就跟上一章的gulp pack一样了~

下一章我们把常用的几个任务都完善进去。