雪碧圖sprity 合併多圖使用心得

介紹

---

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