gulp中如何保證任務執行順序。

舉一個簡單了例子：

gulp.task('task2',function(){
	setTimeout(function(){
		console.log("task2 has been completed")
	},3000)
})

gulp.task('task1',['task2'],function(){
	console.log("task1 has been completed")
})

在命令行中執行gulp task1

經過命令行的任務流程，咱們能夠看出，任務並無像咱們想象的那樣運行。這是由於在gulp中，全部task都是異步執行的，那麼此時咱們須要引入q模塊來幫助咱們解決這個問題。

經過命令行輸入gulp install q --save-dev來安裝q模塊

var Q = require('q');

var Q = require('q');
gulp.task('task2',function(){
    var deferred = Q.defer();
	setTimeout(function(){
		console.log("task2 has been completed")
        deferred.resolve();
	},3000)
    return deferred.promise;
})

gulp.task('task1',['task2'],function(){
	console.log("task1 has been completed")
})

這是咱們就能夠看出不一樣了，當打印"task2 has been completed"以後，task2任務才結束，並開始task1任務。

那麼，當咱們使用stream流的時候，該如何確保同步執行的順序呢。

var uglify = require('gulp-uglify')
var checkFilesize = require("gulp-check-filesize");

gulp.task('task2',function(){
	    gulp.src('lib/react-dom.js')
	 	.pipe(uglify())
	 	.pipe(gulp.dest('compress'))
	 	
})

gulp.task('task1',['task2'],function(){
	gulp.src('compress/react-dom.js')
	.pipe(checkFilesize())
})

 咱們經過命令行npm install gulp-uglify gulp-check-fileseize安裝兩個模塊，前者用於壓縮醜化代碼，後者用於檢測文件大小。

接下來執行gulp task1

咱們能夠看到並無打印出任何有關文件大小的信息，說明執行task1的時候task2尚未執行完，也就是說comress/react-dom.js還未存在。

下面咱們使用回掉函數來確保task2執行完畢以後再執行task1。使用on來監聽end事件，當監聽到stream已經執行完畢後，打印"uglify has been comleted"而後執行回掉函數，結束task2事件（爲何使用callback()能夠用於結束，這個我還不知道。）

gulp.task('task2',function(callback){
	    gulp.src('lib/react-dom.js')
	 	.pipe(uglify())
	 	.pipe(gulp.dest('compress'))
	 	.on('end',function(){
	 		console.log('uglify has benn comleted')
	 		callback()
	 	})
	 	
})

gulp.task('task1',['task2'],function(){
	gulp.src('compress/react-dom.js')
	.pipe(checkFilesize())
})

咱們能夠看出已經打印出react-dom.js的文件大小了。

還有一種寫法，不過這種寫法，就不能打印成功信息了。

gulp.task('task2',function(callback){
	    gulp.src('lib/react-dom.js')
	 	.pipe(uglify())
	 	.pipe(gulp.dest('compress'))
	 	.on('end',callback)
	 	
})

gulp.task('task1',['task2'],function(){
	gulp.src('compress/react-dom.js')
	.pipe(checkFilesize())
})

最後一種寫法是直接return一個stream流，

gulp.task('task2',function(callback){
	    return gulp.src('lib/react-dom.js')
	 	.pipe(uglify())
	 	.pipe(gulp.dest('compress'))
	 	
})

gulp.task('task1',['task2'],function(){
	gulp.src('compress/react-dom.js')
	.pipe(checkFilesize())
})

這也是能夠作到的。

以上的方法都是針對於各類狀況，使gulp任務安裝指定順序執行。但願能夠幫到你們。

https://github.com/gulpjs/gulp/blob/master/docs/API.md#async-task-support

https://github.com/gulpjs/gulp/issues/1637

https://knpuniversity.com/screencast/gulp/on-end-async-and-listeners