标签：
1.在当前目录下安装npm install gulp-css-spriter
2.gulpfile.js中
var gulp = require(‘gulp‘), spriter = require(‘gulp-css-spriter‘);
gulp.task(‘spritercss1‘, function() {
return gulp.src(‘./css/1.css‘)
.pipe(spriter({
‘spriteSheet‘: ‘./dist/img/spritesheet.png‘,
‘pathToSpriteSheetFromCSS‘: ‘../img/spritesheet.png‘
}))
.pipe(gulp.dest(‘./dist/css‘));
});
总结：路径不能乱写否则会覆盖原css，原css中的路径不对了，就不能生成图片精灵了。
-----------------------------------------------
若只是合并部分图片则，
摘自http://www.qianduancun.com/npm/43.html
1.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 且判断url是否有?__spriter后缀
if(transformedDeclaration.property === ‘background-image‘ && /\?__spriter/i.test(transformedDeclaration.value)) {
transformedDeclaration.value = transformedDeclaration.value.replace(‘?__spriter‘,‘‘);
return cb(transformedDeclaration, declarationIndex, declarations);
}
// Background is a shorthand property so make sure `url()` is in there 且判断url是否有?__spriter后缀
else if(transformedDeclaration.property === ‘background‘ && /\?__spriter/i.test(transformedDeclaration.value)) {
transformedDeclaration.value = transformedDeclaration.value.replace(‘?__spriter‘,‘‘);
var hasImageValue = spriterUtil.backgroundURLRegex.test(transformedDeclaration.value);
if(hasImageValue) {
return cb(transformedDeclaration, declarationIndex, declarations);
}
}
原css中这样写：
区别于：
这样只有带？_spriter的图片会合并。
标签：
原文地址：http://www.cnblogs.com/lichaoqing/p/5676991.html
