介绍
sprity 是一个模块化的雪碧图生成工具
会根据目录中的图片生成相应的雪碧图和样式文件,支持retina图,可以内嵌base64 编码格式的图,支持不同的图片格式和有不同的图片引擎可以选择。
sprity 的前身是css-sprite,sprity的 git地址
sprity的功能
生成雪碧图和对应的css文件(也可以是less,sass等)
可以配置多个雪碧图图片
可以配置多个分辨率的雪碧图(也就是可以按照比例生成雪碧图)
可以讲图片搞成base64编码
如何使用
安装
npm install sprity --save
使用
sprity可以和gulp,grunt配合使用,这里使用的是gulp,先上代码
gulp.task('sprites', function () {
return sprity.src({
name: 'icon',//这里配置name,生成的图片就是icon-xx.png了
src: config.src.img + '/icons/**/*.png',//这里配置生成多个雪碧图,对应目录都在icons/**下面
split: true,//一定要设置为true,不然多图就有问题了
style: './icon.scss',//生成的sass文件路径
format: 'png',//
processor: 'sass',//指定sass的处理器,[点击查看更多](https://github.com/sprity/sprity#style-processors)
cssPath: '#{$icon-sprite-path}',//这里制定生成的css 的路径,模版里面也有对应的
dimension: [{
ratio: 1, dpi: 36
},
{
ratio: 0.5
}],
template: './sprite-tpl.hbs',
orientation: 'binary-tree'//指定图片算法,具体的可以参考git
})
.pipe(gulpif('*.png', gulp.dest(config.dest.img), gulp.dest(config.src.sass)))
});
hbs模版,sprity采用的是handlebars模版,具体的语法参考handlebars,
自定义模版所有的字段参考wiki
注意$icon-sprite-path,在sprity的配置文件中用到过,这里在sass里面定义了一个变量
我的原图都是2倍,合图后需要缩放2倍,因此在配置文件中定义了一个0.5的倍率作为参考倍率
$icon-sprite-path: '/static/images';
{{#each layouts}}
{{#each sprites}}
.{{cssesc ../classname}} {
{{#if dpi}}
background-image: url('{{escimage url}}');
background-size: {{baseWidth}}px {{baseHeight}}px;
display:inline-block;
{{/if}}
}
{{/each}}
{{#each layout.items}}
.{{../classname}}-{{meta.name}} {
background-position: -{{baseDim x}}px -{{baseDim y}}px;
width: {{baseDim width}}px;
height: {{baseDim height}}px;
}
{{/each}}
{{/each}}
sprity生成的sass文件,东西太多了,选了几个列出来,这下知道$icon-sprite-path是干什么的了吧
$icon-sprite-path: '/static/images';
.icon-apps {
}
.icon-apps {
background-image: url('#{$icon-sprite-path}/icon-apps.png');
background-size: 108px 108px;
display:inline-block;
}
.icon-apps-huiyishi {
background-position: -0px -0px;
width: 54px;
height: 54px;
}
注意,前缀如果想不是icon,可以通过prefix来控制
结语
sprity 能做到自动化生成雪碧图,但是可配置型不是特别高,控制粒度很大,后续考虑使用postcss,postcss的合图插件力度可以控制在单个css规则上面,这样就可以指定那些需要base64,那些需要合图,那些可以搞到cdn上了