首页 > gulp-css-spriter如何让合并的雪碧图是针对css,比如2个css生成2个雪碧图

gulp-css-spriter如何让合并的雪碧图是针对css,比如2个css生成2个雪碧图

现状:

想要的结果是, 一个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
【热门文章】
【热门文章】