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
这里有坑，安装4.0首先要安装git或者github，然后还要把git添加到系统变量path中(D:\Program Files\Git\cmd;),这样才能成功

# 卸载全局的 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