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