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/icons@2x.png',  // 两倍雪碧图输出路径
destCss: 'manage/modules/ic-icons/sprite/icons.less', // 雪碧图less输出路径，也支持输出css
imgPath: './../../modules/ic-icons/sprite/icons.png', //默认雪碧图在css中url引用路径
retinaImgPath: './../../modules/ic-icons/sprite/icons@2x.png', // 两倍雪碧图在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');

业务集成

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

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