雪碧圖工具sprity

前身是css-sprite，前幾天幫新同事搭建環境，意外發現sprity在window下可以安裝成功了，同時也發現node版本已經4點幾了，自己電腦的版本還停留在0.10，趕緊把自己的node升級到最新版本，win10下，sprity安裝成功，可以使用。

在這里介紹下sprity順便提下自己遇到的問題。

介紹

sprity，一個模塊化的雪碧圖生成工具，會根據目錄中的圖片生成相應的雪碧圖和樣式文件，支持retina圖，可以內嵌base64 編碼格式的圖，支持不同的圖片格式和有不同的圖片引擎可以選擇。

安裝使用

通過npm安裝

npm install sprity --save

也可以全局安裝使用

npm install sprity -g

結合gulp使用，也可以用grunt，這里說下gulp的用法：

var gulp = require('gulp');
var gulpif = require('gulp-if');
var sprity = require('sprity');

// 創建sprites任務
gulp.task('sprites', function () {
  return sprity.src({
    src: './src/images/*/.{png,jpg}', //需要進行合并的圖片路徑
    style: './sprite.css',              //生成的樣式文件名和格式，可以生成scss
    // 還有很多其他參數，如指定模板、圖片格式、前綴、名稱和圖片合并的方向等，具體可以查看sprity的github內容
    processor: 'sass', // 生成的樣式格式
  })
  .pipe(gulpif('*.png', gulp.dest('./dist/img/'), gulp.dest('./dist/css/')))
});</pre> 
配置好options，把圖片放進目錄中，運行gulp sprites，就可以生成對應的雪碧圖和樣式文件了。 

sprity支持三種圖片引擎，sprity-lwip、sprity-canvas和sprity-gm。默認使用的是sprity-lwip，好像lwip需要重新編譯node-gyp什么的，所以當時我還是win7系統的時候，經常會報錯，無法編譯成功。另兩個沒試過，不展開說，有興趣的可以去試著使用下。 

模板 

sprity采用handlebar來處理模板，已經寫好有模板案例可以參考， sprity-css 

問題 

使用途中，我遇到一個問題無法解決，一個gulp任務里面，我想同時分開生成多張雪碧圖，不知道為什么生成的圖和樣式會合并在一起。 

例如，我這樣寫： 

gulp.task('sprites', function () {
    sprity.src({
        src: '/img/icon/*.png',
        style: '_icon.scss',
        format: 'png',
        orientation: 'left-right',
        template: './sprity-css.hbs',
        processor: 'scss',
        prefix: 'icon',
        name: 'icon'
    })
    .pipe(gulpif('*.png', gulp.dest('/img/'), gulp.dest('/css/')));
    sprity.src({
        src: topicType + '/img/bg/*.png',
        style: '_bg.scss',
        format: 'png',
        orientation: 'left-right',
        template: './sprity-css.hbs',
        processor: 'scss',
        prefix: 'bg',
        name: 'bg'
    })
    .pipe(gulpif('*.png', gulp.dest('/img/'), gulp.dest('/css/')));
});
 
最后生成兩張圖片：icon.png和bg.png，兩個樣式文件：_bg.scss和_icon.scss，這樣沒錯，可以icon的圖片和樣式里面包含有bg的圖片和樣式： 

_icon.scss: 

.bg {
      background-image: url('#{$icon-sprite-path}/bg.png');
    }

.bg-btn-tg {
    background-position: -526px -196px;
    width: 80px;
    height: 32px;
  }
.icon {
      background-image: url('#{$icon-sprite-path}/icon.png');
    }
.icon-btn-tg {
    background-position: -510px -280px;
    width: 80px;
    height: 32px;
  }</pre> 
_bg.scss: 

.bg {
    background-image: url('#{$icon-sprite-path}/bg.png');
  }

.bg-btn-tg {
  background-position: -526px -196px;
  width: 80px;
  height: 32px;
}</pre> 
我不確定是gulp流的問題，還是模板的問題，因為模板循環的是一個數組來的。sprity-css.hbs: 

{{#each layouts}}
  {{#each sprites}}


{{#if dpi}}
@media (-webkit-min-device-pixel-ratio: {{ratio}}), (min-resolution: {{dpi}}dpi) {
{{/if}}
.{{cssesc ../classname}} {
  background-image: url('{{escimage url}}');
  {{#if dpi}}
  background-size: {{baseWidth}}px {{baseHeight}}px;
  {{/if}}
}
{{#if dpi}}
}
{{/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}}</pre></div>