gulp-css-spriter 雪碧图合成
2016-03-15 00:47
519 查看
一、配置
gulp的雪碧图功能没有grunt那么强大,但是类似功能也支持,功能稍微弱一些,但是也很棒
npm地址:https://www.npmjs.com/package/gulp-css-spriter/ https://www.npmjs.com/package/grunt-css-sprite
二、gulp
三、css
四、配置
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);
}
}
完整图片
没有添加?__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-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);
}
}
完整图片
没有添加?__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')); });
相关文章推荐
- css调式技巧:a.class与a .class的区别, 空格的魅力
- CSS3实现图片轮播Slider
- CSS实现垂直居中的常用方法
- css杂类收集3
- css
- HTML+CSS实战(二)——固定层效果
- 主流浏览器css兼容问题的总结
- HTML+CSS实战(一)——导航条菜单的制作
- DIV+CSS 网页布局之:混合布局
- 浅谈百度地图的简单开发之引入基本地图以及修改地图样式(一)
- CSS学习(十四)-CSS颜色之一
- DIV+CSS 网页布局之:三列布局
- DIV+CSS 网页布局之:两列布局
- DIV+CSS 网页布局之:一列布局
- css布局:如何使底部始终在文档末尾
- 慕课网【HTML+CSS】3.13学习内容
- 网页层叠样式表(html+css)
- 子div在父div居底
- css3 -> 多栏布局
- 说说css3动画效果那点事儿(一)