现状:
想要的结果是, 一个css对应一个雪碧图。
中午睡觉去了。
你这个加载所有的css,那么你这个代码会把你加载的css里的所有图片都合并起来,所以,你的代码应该是这样:
var gulp = require('gulp');
var spriter = require('gulp-css-spriter');
gulp.task('css',function {
return gulp.src('a.css').pipe(spriter({
'spriteSheet' : './dist/images/spriteSheet_a.png',
'pathToSpriteSheetFormCss' : '../images/spriteSheet_a.png'
})).pipe(gulp.dest('.dist/css'));
});
gulp.task('css',function {
return gulp.src('b.css').pipe(spriter({
'spriteSheet' : './dist/images/spriteSheet_b.png',
'pathToSpriteSheetFormCss' : '../images/spriteSheet_b.png'
})).pipe(gulp.dest('.dist/css'));
});
没用过, 但是我的思路大概是这样
function SpriterGroup(pathArr){
for(let i = 0; i < pathArr.length; i++){
gulp.src(pathArr[i]).pipe(spriter({
'spriteSheet' : './dist/images/spriteSheet_' + i +'.png',
'pathToSpriteSheetFormCss' : '../images/spriteSheet_' + i + '.png'
})).pipe(gulp.dest('.dist/css'));)
}
}
gulp.task('spirter', function(){
spriterGroup([ 'a.css', 'b.css'])
})
// 你也可以动态的获取目录下的所有css路径, 然后作为实际参数传入spriterGroup