写在前面
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
纸上得来终觉浅，绝知此事要躬行
