grunt-spritesmith自动生成雪碧图

grunt-spritesmith

自动生成雪碧图和样式，解决以下问题：

1. 依赖做图软件
2. 维护css成本高
3. 浪费开发时间

安装

npm install grunt-spritesmith --save-dev

集成至Gruntfile.js

    grunt.initConfig({
        sprite: {
            icIcons: {
                src: ['manage/modules/ic-icons/images/*.png'], //素材图片
                retinaSrcFilter: ['manage/modules/ic-icons/images/*@2x.png'], //匹配两倍素材图
                dest: 'manage/modules/ic-icons/sprite/icons.png', // 默认雪碧图输出路径
                retinaDest: 'manage/modules/ic-icons/sprite/[email protected]',  // 两倍雪碧图输出路径
                destCss: 'manage/modules/ic-icons/sprite/icons.less', // 雪碧图less输出路径，也支持输出css
                imgPath: './../../modules/ic-icons/sprite/icons.png', //默认雪碧图在css中url引用路径
                retinaImgPath: './../../modules/ic-icons/sprite/[email protected]', // 两倍雪碧图在css中url引用路径
                cssVarMap: function(sprite) {
                    sprite.name = 'm-ic-icon.m-ic-icon-' + sprite.name;  
                    //定义图标class名称，例如 del.png对应 m-ic-icon.m-ic-icon-del
                }
            }
        }
    });
    
  grunt.loadNpmTasks('grunt-spritesmith');

业务集成

不支持retina屏

@import "sprite/icons.less";
.sprites(@spritesheet-sprites);

支持retina屏

@import "sprite/icons.less";
.retina-sprites(@retina-groups); //

当然这个插件也支持定义雪碧图的样式模块，雪碧图质量等等了解更多