按顺序逐个同步地运行 Gulp 任务

写在前面

Gulp是一个非常好用的代码发布软件（比fis3好了不知多少倍）

但它有一个缺点（不过也是它的优点），就是它的所有任务都是异步完成的，对于一些必须要同步执行的操作，就会有问题了。

例如我要进行一个工程的样式文件进行发布，那我要先对scss进行编译，然后对里面的图片合并为雪碧图，最后在对处理好的css进行合并压缩。

这是一个环环相扣的任务链，这时Gulp的异步操作就不能用了。

那怎么办呢？

gulp-sequence

这个gulp的社区早就有很多此类控件可以让我们调用了，例如gulp的开发文档里就有如何同步执行任务的说明（不过这个太简单了），还有国内的 Teambition 团队开源了 gulp-sequence，以及国外开发者开发的 run-sequence

下面我就用 gulp-sequence来做为例子说说怎么顺序逐个同步地运行 Gulp 任务

就用我上面说的样式发布的操作来做例子：

这是编译scss的任务：

gulp.task( 'spriteScss', function( cb ) {
    var src = [];
    src.push( cssSrc + "home/" + projectModule + '/**/*.scss' );

    return gulp.src( src )
        .pipe( sass().on( 'error', sass.logError ) )
        .pipe( gulp.dest( 'spriteScss' ) );
} );

合并样式文件

gulp.task( 'spriteCss', function( cb ) {
    var src = [];
    src.push( 'spriteScss/**/*.css' );
    //- 创建一个名为 concat 的 task
    return gulp.src( src )
        //- 合并后的文件名
        .pipe( concat( projectModule + '.css' ) )
        .pipe( replace( /\(images\//g, '(../spriteImg/' ) )
        //- 输出文件本地
        .pipe( gulp.dest( 'spriteCss' ) );
} );

生成雪碧图

gulp.task( 'spriteDest', function( cb ) {
    return gulp.src( 'spriteCss/' + projectModule + '.css' )
        .pipe( cssSprite( {
            // sprite背景图源文件夹，只有匹配此路径才会处理
            imagepath: 'spriteImg/',
            // 映射CSS中背景路径，支持函数和数组，默认为 null
            imagepath_map: null,
            // 雪碧图输出目录，注意，会覆盖之前文件！默认 images/
            spritedest: 'spriteImg/',
            // 替换后的背景路径，默认 ../images/
            spritepath: '../images/' + projectModule + '/',
            // 各图片间间距，如果设置为奇数，会强制+1以保证生成的2x图片为偶数宽高，默认 0
            padding: 2,
            // 是否使用 image-set 作为2x图片实现，默认不使用
            useimageset: false,
            // 是否以时间戳为文件名生成新的雪碧图文件，如果启用请注意清理之前生成的文件，默认不生成新文件
            newsprite: mode === "release", //判断是否发布模式，是就建以时间戳为文件名的文件，否则不建。
            // 给雪碧图追加时间戳，默认不追加
            spritestamp: false,
            // 在CSS文件末尾追加时间戳，默认不追加
            cssstamp: false
        } ) )
        .pipe( gulp.dest( 'spriteDest/' ) );
} );

那我们只要这样使用控件

gulp.task( 'css', gulpSequence( 'spriteScss', 'spriteCss', 'spriteDest', function() {
    console.log( "输出完成！" );
} ) );

就可以完成任务的同步运行了。

当然 gulp-sequence还不止这种用方法，如果感兴趣的话可以去它的github去了解。

————
前端·小h
纸上得来终觉浅，绝知此事要躬行