介绍

---

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上了