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