gulp中task的異步執行：加上return

這是一個很是小的Gulp使用問題，小到我都以爲上不了檯面，可是對於新手來講，仍是有參考價值和實用價值的，因而就以問答的方式簡短的描述一下。高手繞道。

邂逅問題

一個老工程，比較亂，裏面有前同事寫的一個簡單的gulp的task，裏面有這些東西：

gulp.task('dev', ['css', 'js'], function () {
        
    });

    gulp.task('js', function () {
         gulp.src(scriptSrc)
            .pipe(changed(dist,{extension:'.js'}))
            .pipe(plumber({
                errorHandler: function (error) {
                    notify.onError("Error: <%= error.message %>");
                    console.log(error);
                }
            }))
            .pipe(debug({title: '編譯:'}))
            .pipe(sourcemaps.init())
            .pipe(babel(babelOpt))
            .pipe(sourcemaps.write('.'))
            .pipe(gulp.dest(dist));
    });

    gulp.task('css', function () {
        gulp.src(styleSrc)
            .pipe(changed(dist))
            .pipe(debug({title: '編譯:'}))
            .pipe(minifyCss())
            .pipe(gulp.dest(dist));
    });

本人使用的時候發現，執行task的時候老是先finished，而後再編譯（以下圖），老以爲不該該是這樣。那個debug仍是我後來加的，由於老以爲task Finished以後，瀏覽器要刷幾回纔會出現變化。

解決方法

加上return，不加return的話，task和裏面的gulp流是異步執行的，因此就會出現先finished在編譯的狀況。

gulp.task('dev', ['css', 'js'], function () {
        
    });

    gulp.task('js', function () {
        return gulp.src(scriptSrc)
            .pipe(changed(dist,{extension:'.js'}))
            .pipe(plumber({
                errorHandler: function (error) {
                    notify.onError("Error: <%= error.message %>");
                    console.log(error);
                }
            }))
            .pipe(debug({title: '編譯:'}))
            .pipe(sourcemaps.init())
            .pipe(babel(babelOpt))
            .pipe(sourcemaps.write('.'))
            .pipe(gulp.dest(dist));
    });

    gulp.task('css', function () {
        return gulp.src(styleSrc)
            .pipe(changed(dist))
            .pipe(debug({title: '編譯:'}))
            .pipe(minifyCss())
            .pipe(gulp.dest(dist));
    });

問題解決。

總結

爛代碼是程序員加班的惟一緣由。