gulp顺序执行任务

gulp的任务的执行是异步的。 
因此，当我写完一系列的任务，准备一股脑地执行。

# gulp.task('prod', ['clean', 'compass', 'image', 'style', 'html', 'ftp']); 

[10:22:54] Starting 'clean'... [10:22:54] Starting 'compass'... [10:22:54] Starting 'imagemin'... [10:22:54] Starting 'style'... [10:22:54] Starting 'html'... [10:22:54] Starting 'ftp'... [10:22:54] Finished 'style' after 88 ms [10:22:54] Finished 'html' after 86 ms [10:22:54] Finished 'clean' after 255 ms [10:22:54] Finished 'ftp' after 549 ms [10:22:55] Finished 'compass' after 1.5 s [10:22:56] gulp-imagemin: Minified 15 images (saved 337.01 kB - 30.8%) [10:22:56] Finished 'imagemin' after 2.46 s [10:22:56] Starting 'prod'... [10:22:56] Finished 'prod' after 14 μs 

这不是我想要的/(ㄒoㄒ)/~~。任务彻底错乱了。ftp上并无看到我要的文件，由于其余任务还没执行完ftp任务就已经执行了。

我想要的是：（'clean', 'compass', [image', 'style', 'html']，'ftp'），圆括号里面串行，中括号里面并行。能够给每一个任务写依赖，可是好麻烦，并且有时候多个依赖，依赖与依赖之间依赖。算了。用插件。

var runSequence = require('gulp-run-sequence'); gulp.task('prod', function(cb) { runSequence('clean', 'compass', ['image', 'style', 'html'], 'ftp', cb); }); 

[15:20:32] Starting 'prod'... [15:20:32] Starting 'clean'... [15:20:32] Finished 'clean' after 23 ms [15:20:32] Starting 'compass'... [15:20:33] Finished 'compass' after 1.21 s [15:20:33] Starting 'image'... [15:20:33] Starting 'style'... [15:20:33] Starting 'html'... [15:20:33] Finished 'style' after 49 ms [15:20:33] Finished 'html' after 55 ms [15:20:36] gulp-imagemin: Minified 15 images (saved 337.01 kB - 30.8%) [15:20:36] Finished 'image' after 2.26 s [15:20:36] Starting 'ftp'... [15:20:36] Finished 'ftp' after 82 ms [15:20:36] Finished 'prod' after 3.58 s 

【2015/7/13 update: gulp-run-sequrence插件https://www.npmjs.com/package/gulp-run-sequence 已弃用了，能够用gulp-sequence代替https://github.com/teambition/gulp-sequence 】

解决。

也能够用gulp 4.0， 虽然还没正式发布，可是试用了一下，超好。

首先咱们要卸了以前装的3.x先，而后重装4.0

# 卸载全局的 gulp $ npm uninstall gulp -g # 安装全局的 gulp 4.0 $ npm install "gulpjs/gulp-cli#4.0" -g $ npm install "gulpjs/gulp#4.0" -g # 到项目目录里删掉本地的 gulp $ npm rm gulp --save-dev # 安装本地的 gulp 4.0 $ npm install "gulpjs/gulp#4.0" --save-dev 

而后。就能够这样写咱们的任务了

# gulp.task('prod', gulp.series('clean', 'compass', gulp.parallel('image', 'style', 'html'), 'ftp')); 

series里的任务是顺序执行的，parallel里的任务是同时执行的。

执行gulp prod看一下效果

[15:36:53] Starting 'prod'... [15:36:53] Starting 'clean'... [15:36:54] Finished 'clean' after 24 ms [15:36:54] Starting 'compass'... [15:36:55] Finished 'compass' after 1.28 s [15:36:55] Starting 'parallel'... [15:36:55] Starting 'image'... [15:36:55] Starting 'style'... [15:36:55] Starting 'html'... [15:36:55] Finished 'style' after 67 ms [15:36:55] Finished 'html' after 67 ms [15:36:57] gulp-imagemin: Minified 15 images (saved 337.01 kB - 30.8%) [15:36:57] Finished 'image' after 2.25 s [15:36:57] Finished 'parallel' after 2.25 s [15:36:57] Starting 'ftp'... [15:36:57] Finished 'ftp' after 63 ms [15:36:57] Finished 'prod' after 3.62 s 

关于4.0: https://github.com/gulpjs/gulp/issues/803