介紹

---

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

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的雪碧图sprity 合并多图使用心得的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。