gulp-css-spriter 将css代码中的切片图片合并成雪碧图

2024-04-27 14:28:42

字体：大中小

来源：转载

供稿：网友

gulp-CSS-sPRiter 将css代码中的切片图片合并成雪碧图

NPM地址：https://www.npmjs.com/package/gulp-css-spriter/

配置gulpfile.js：

vargulp=require('gulp'),

minifyCSS=require('gulp-minify-css'),spriter=require('gulp-css-spriter');gulp.task('css',function(){vartimestamp=+newDate();//需要自动合并雪碧图的样式文件returngulp.src('./src/css/style.css').pipe(spriter({//生成的spriter的位置'spriteSheet':'./dist/images/sprite'+timestamp+'.png',//生成样式文件图片引用地址的路径//如下将生产：backgound:url(../images/sprite20324232.png)'pathToSpriteSheetFromCSS':'../images/sprite'+timestamp+'.png'})).pipe(minifyCSS())//产出路径.pipe(gulp.dest('./dist'));});

技巧：

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-imagealwayshasaurl且判断url是否有?__spriter后缀

if(transformedDeclaration.property==='background-image'&&//?__spriter/i.test(transformedDeclaration.value)){transformedDeclaration.value=transformedDeclaration.value.replace('?__spriter','');returncb(transformedDeclaration,declarationIndex,declarations);}//Backgroundisashorthandpropertysomakesure`url()`isinthere且判断url是否有?__spriter后缀elseif(transformedDeclaration.property==='background'&&//?__spriter/i.test(transformedDeclaration.value)){transformedDeclaration.value=transformedDeclaration.value.replace('?__spriter','');varhasImageValue=spriterUtil.backgroundURLRegex.test(transformedDeclaration.value);if(hasImageValue){returncb(transformedDeclaration,declarationIndex,declarations);}}

如图：