寫在前面

Gulp是一個(gè)非常好用的代碼發(fā)布軟件（比fis3好了不知多少倍）

但它有一個(gè)缺點(diǎn)（不過也是它的優(yōu)點(diǎn)），就是它的所有任務(wù)都是異步完成的，對(duì)于一些必須要同步執(zhí)行的操作，就會(huì)有問題了。

例如我要進(jìn)行一個(gè)工程的樣式文件進(jìn)行發(fā)布，那我要先對(duì)scss進(jìn)行編譯，然后對(duì)里面的圖片合并為雪碧圖，最后在對(duì)處理好的css進(jìn)行合并壓縮。

這是一個(gè)環(huán)環(huán)相扣的任務(wù)鏈，這時(shí)Gulp的異步操作就不能用了。

那怎么辦呢？

gulp-sequence

這個(gè)gulp的社區(qū)早就有很多此類控件可以讓我們調(diào)用了，例如gulp的開發(fā)文檔里就有如何同步執(zhí)行任務(wù)的說明（不過這個(gè)太簡(jiǎn)單了），還有國(guó)內(nèi)的 Teambition 團(tuán)隊(duì)開源了 gulp-sequence，以及國(guó)外開發(fā)者開發(fā)的 run-sequence

下面我就用 gulp-sequence來做為例子說說怎么順序逐個(gè)同步地運(yùn)行 Gulp 任務(wù)

就用我上面說的樣式發(fā)布的操作來做例子：

這是編譯scss的任務(wù)：

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' );
    //- 創(chuàng)建一個(gè)名為 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背景圖源文件夾，只有匹配此路徑才會(huì)處理
            imagepath: 'spriteImg/',
            // 映射CSS中背景路徑，支持函數(shù)和數(shù)組，默認(rèn)為 null
            imagepath_map: null,
            // 雪碧圖輸出目錄，注意，會(huì)覆蓋之前文件！默認(rèn) images/
            spritedest: 'spriteImg/',
            // 替換后的背景路徑，默認(rèn) ../images/
            spritepath: '../images/' + projectModule + '/',
            // 各圖片間間距，如果設(shè)置為奇數(shù)，會(huì)強(qiáng)制+1以保證生成的2x圖片為偶數(shù)寬高，默認(rèn) 0
            padding: 2,
            // 是否使用 image-set 作為2x圖片實(shí)現(xiàn)，默認(rèn)不使用
            useimageset: false,
            // 是否以時(shí)間戳為文件名生成新的雪碧圖文件，如果啟用請(qǐng)注意清理之前生成的文件，默認(rèn)不生成新文件
            newsprite: mode === "release", //判斷是否發(fā)布模式，是就建以時(shí)間戳為文件名的文件，否則不建。
            // 給雪碧圖追加時(shí)間戳，默認(rèn)不追加
            spritestamp: false,
            // 在CSS文件末尾追加時(shí)間戳，默認(rèn)不追加
            cssstamp: false
        } ) )
        .pipe( gulp.dest( 'spriteDest/' ) );
} );

那我們只要這樣使用控件

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

就可以完成任務(wù)的同步運(yùn)行了。

當(dāng)然 gulp-sequence還不止這種用方法，如果感興趣的話可以去它的github去了解。

————
前端·小h
紙上得來終覺淺，絕知此事要躬行