介紹

---

sprity 是一個(gè)模塊化的雪碧圖生成工具
會(huì)根據(jù)目錄中的圖片生成相應(yīng)的雪碧圖和樣式文件，支持retina圖，可以內(nèi)嵌base64 編碼格式的圖，支持不同的圖片格式和有不同的圖片引擎可以選擇。
sprity 的前身是css-sprite,sprity的 git地址

sprity的功能

• 生成雪碧圖和對(duì)應(yīng)的css文件(也可以是less，sass等）

• 可以配置多個(gè)雪碧圖圖片

• 可以配置多個(gè)分辨率的雪碧圖（也就是可以按照比例生成雪碧圖)

• 可以講圖片搞成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',//這里配置生成多個(gè)雪碧圖，對(duì)應(yīng)目錄都在icons/**下面split: true,//一定要設(shè)置為true，不然多圖就有問題了style: './icon.scss',//生成的sass文件路徑format: 'png',//processor: 'sass',//指定sass的處理器，[點(diǎn)擊查看更多](https://github.com/sprity/sprity#style-processors)cssPath: '#{$icon-sprite-path}',//這里制定生成的css 的路徑，模版里面也有對(duì)應(yīng)的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里面定義了一個(gè)變量
我的原圖都是2倍，合圖后需要縮放2倍，因此在配置文件中定義了一個(gè)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文件,東西太多了，選了幾個(gè)列出來，這下知道$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來控制

結(jié)語

sprity 能做到自動(dòng)化生成雪碧圖，但是可配置型不是特別高，控制粒度很大，后續(xù)考慮使用postcss，postcss的合圖插件力度可以控制在單個(gè)css規(guī)則上面，這樣就可以指定那些需要base64，那些需要合圖，那些可以搞到cdn上了

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。