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

vboy1010 发布于2019-08-28 18:29 / 1977人阅读

摘要：介绍是一个模块化的雪碧图生成工具会根据目录中的图片生成相应的雪碧图和样式文件，支持图，可以内嵌编码格式的图，支持不同的图片格式和有不同的图片引擎可以选择。

介绍

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

云服务器 GPU云服务器 html使用雪碧图雪碧图使用心得使用心得与技巧

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111265.html

postcss-lazysprite: 一种生成CSS 雪碧图的懒惰姿势

摘要：无论是早期工具，还是现在流行的配合这类构建工具而产生的雪碧图插件。本文原文链接：https://devework.com/postcss-...，转载请注明原始来源，谢谢！ showImg(https://segmentfault.com/img/bVPmaC?w=1692&h=754); postcss-lazysprite 是一个基于PostCSS 开发的用于生成雪碧图图片及其C...

BearyChat 2019-08-29 12:48 评论0 收藏0
HTML-CSS

摘要：但是，从字体上来说雪碧图制作，使用以及相关，图文。由于采用了编译，所以能够保证在浏览器不支持标准布局的情况下，回滚到旧版本的，保证移动设备中能呈现出一样的布局效果。我不想陷入和的纷争，但是有一件事是确定的极大的提升了移动端一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 ...

xiaokai 2019-08-01 18:21 评论0 收藏0
HTML-CSS

摘要：但是，从字体上来说雪碧图制作，使用以及相关，图文。由于采用了编译，所以能够保证在浏览器不支持标准布局的情况下，回滚到旧版本的，保证移动设备中能呈现出一样的布局效果。我不想陷入和的纷争，但是有一件事是确定的极大的提升了移动端一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 ...

CHENGKANG 2019-08-29 14:11 评论0 收藏0
使用compass自动合并css雪碧图(css sprite)

摘要：使用雪碧图，能够减少页面的请求数降低图片占用的字节，以此来达到提升页面访问速度的目的。也正是因为这一点，导致很多开发者懒于使用雪碧图。本文就介绍下怎样使用来自动合并雪碧图。生成的每个雪碧图默认的规则是目录名图片名。 css雪碧图又叫css精灵或css sprite，是一种背景图片的拼合技术。使用css雪碧图，能够减少页面的请求数、降低图片占用的字节，以此来达到提升页面访问速度的目的。但...

刘永祥 2019-08-28 18:06 评论0 收藏0
CSS > 关于雪碧图预处理和后处理方案的讨论

摘要：预处理方案代表和预处理方案是预先指定需要生成的雪碧图切片元素，由工具合成后，得到相应的雪碧图和数据文件，开发中将二者投入使用。预处理方案一般以页面为单元组织雪碧图。结语关于雪碧图的处理方案的讨论就到此结束了。广告：SF 里弄了个 CSS 小圈子，欢迎一起来讨论问题前端小图标处理方案众多，本文主要介绍基于雪碧图的处理方案，分析雪碧图的预处理和后处理模式的得与失，以及在项目中通常会遇到...

hyuan 2019-08-30 15:53 评论0 收藏0