用gulp.spritesmith完成一个生成精灵图的task任务,想继续做一个新的精灵图,于是在第一个任务后面加上新的,当执行任务时只有第二个是生效的。
gulp.task('sprites', function() {
var spriteData = gulp.src('./dev/assets/images/icons/normal/*.png')
.pipe($.spritesmith({
retinaSrcFilter: './dev/assets/images/icons/normal/*-2x.png',
retinaImgName: '../images/sprite-2x.png',
imgName: 'sprite.png',
imgPath: '../images/sprite.png',
cssName: '_icons-sprites.scss',
padding: 20,
algorithm: '',
}));
//生成多个精灵图
var spirteFile = gulp.src('./dev/assets/images/icons1/*.png')
.pipe($.spritesmith({
imgName: 'sprite-foods.png',
imgPath: '../images/sprite-foods.png',
cssName: '_foods-sprites.scss',
cssSpritesheetName :'foods',
padding: 10,
algorithm: 'binary-tree',
}));
var imgStream = spriteData.img
var imgFood = spirteFile.img
.pipe(buffer())
.pipe(gulp.dest('./dev/assets/images'))
var cssStream = spriteData.css
var cssFood = spirteFile.css
.pipe(gulp.dest('./dev/assets/sass/sprites'))
return merge(imgStream, imgFood, cssStream, cssFood);
});
该怎么写才能使两个都生效呢?合并任务?
var imgStream = spriteData.img
.pipe(buffer())
.pipe(gulp.dest('./dev/assets/images'));
var imgFood = spirteFile.img
.pipe(buffer())
.pipe(gulp.dest('./dev/assets/images'));
var cssStream = spriteData.css.pipe(gulp.dest('./dev/assets/sass/sprites'));
var cssFood = spirteFile.css.pipe(gulp.dest('./dev/assets/sass/sprites'));
return merge(imgStream, imgFood, cssStream, cssFood);
你的spriteData.img和spriteData.css流最后没有输入到dest。