雪碧图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上了

你可能感兴趣的:(sprite,gulp,css,前端)