javascript - 怎么用gulp.spritesmith生成多个精灵图
本文介绍了javascript - 怎么用gulp.spritesmith生成多个精灵图的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
用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。
这篇关于javascript - 怎么用gulp.spritesmith生成多个精灵图的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文