雪碧图sprity 合并多图使用心得

2024年1月14日 242次阅读 来源: qinghui

介绍

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

    原文作者：qinghui
    原文地址: https://segmentfault.com/a/1190000004277829
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞