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));
    });

问题解决。

总结

烂代码是程序员加班的唯一原因。