gulp-css-spriter 雪碧圖合成

一、配置

gulp的雪碧圖功能沒有grunt那么強大，但是類似功能也支持，功能稍微弱一些，但是也很棒

npm地址：https://www.npmjs.com/package/gulp-css-spriter/    https://www.npmjs.com/package/grunt-css-sprite

vargulp=require('gulp'),
    minifyCSS=require('gulp-minify-css'),
    spriter=require('gulp-css-spriter');

二、gulp

gulp.task('css', function(){
    var timestamp = +new Date();
    return gulp.src(srcPath.css)
        .pipe(spriter({
            // 生成的spriter的位置
            'spriteSheet': './web/images/sprite_'+timestamp+'.png',
            // 生成樣式文件圖片引用地址的路徑
            // 如下將生產：backgound:url(../images/sprite20324232.png)
            'pathToSpriteSheetFromCSS': '../images/sprite_'+timestamp+'.png'
        }))
        .pipe(minifyCss())
        .pipe(autoprefixer({
            browsers:['last 2 Chrome versions', 'Safari >0', 'Explorer >0', 'Edge >0', 'Opera >0', 'Firefox >=20'],
            cascade:false,
            remove:false,
        }))
        .pipe(gulp.dest(distPath.css));//保存壓縮文件到指定的目錄下面
});

三、css

.w{width: 266px;height: 78px;background: url(../images/w.png?__spriter) 0 0 no-repeat;}
.j{width: 270px;height: 60px;background: url(../images/jd.png?__spriter) 0 0 no-repeat;}
.t{width: 290px;height: 100px;background: url(../images/tmall.png) 0 0 no-repeat;}

四、配置

gulp-css-spriter默認會對樣式文件里，所有的background/background-image的圖片合並，

但實際項目中，我們不是所有的圖片都需要合並。

background-image:url(../slice/p1-3.png?__spriter);//有?__spriter后綴的合並

background-image:url(../slice/p-cao1.png);//不合並

修改下面文件可以按需合並。

node_modules\gulp-css-spriter\lib\map-over-styles-and-transform-background-image-declarations.js

48行開始的if-else if代碼塊中， // background-image always has a url 

        // background-image always has a url
        if(transformedDeclaration.property === 'background-image') {
            return cb(transformedDeclaration, declarationIndex, declarations);
        }
        // Background is a shorthand property so make sure `url()` is in there
        else if(transformedDeclaration.property === 'background') {
            var hasImageValue = spriterUtil.backgroundURLRegex.test(transformedDeclaration.value);

            if(hasImageValue) {
                return cb(transformedDeclaration, declarationIndex, declarations);
            }
        }

 替換為下面代碼：

                //background-imagealwayshasaurl且判斷url是否有?__bg 后綴
                if(transformedDeclaration.property === 'background-image'&&/\?__bg/i.test(transformedDeclaration.value)){
                    transformedDeclaration.value = transformedDeclaration.value.replace('?__bg','');
                    return cb(transformedDeclaration,declarationIndex,declarations);
                }
                //Backgroundisashorthandpropertysomakesure`url()`isinthere且判斷url是否有?__bg 后綴
                else if(transformedDeclaration.property === 'background'&&/\?__bg/i.test(transformedDeclaration.value)){
                    transformedDeclaration.value = transformedDeclaration.value.replace('?__bg','');
                    var hasImageValue = spriterUtil.backgroundURLRegex.test(transformedDeclaration.value);
                    if(hasImageValue){
                        return cb(transformedDeclaration,declarationIndex,declarations);
                    }
                }

完整圖片

沒有添加?__spriter不會合並

五、增強

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'])
})

　

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'));
});