合并多张png小图,并生成相应的CSS/JSON文件
ImageConcat是基于gm开发,首先安装gm
npm install gm
注意:gm需要安装ImageMagick或者GraphicMagick,详情请看gm
npm install imageConcat
var ic = require('imageConcat');
ic.init({
source:'./dist/sprites/',
imgDir:'dist/sprites/',
dataType:'json,css',
dataDir:'dist/sprites/',
direction:1,
prefixer:['babyFade','bigEat'],
});
- source: 图片资源路径
- imgDir: 导出图片的路径
- dataType: 同时生成json、css,或只生成一个
- dataDir: 数据生成的地址
- direction: 排列方式 1 horizontial 0 vertical.
- prefixer: 根据前缀生成的多个sprite图片,如果不写将全部图片生成到一张图中
{
"babyFade": {
"babyFade0": {
"path": "dist\\sprites\\babyFade0.png",
"x": 0,
"y": 0,
"w": 41,
"h": 46
},
"babyFade1": {
"path": "dist\\sprites\\babyFade1.png",
"x": 41,
"y": 0,
"w": 41,
"h": 46
},
"src": "dist/sprites/babyFade.min.png"
},
"bigEat": {
"bigEat0": {
"path": "dist\\sprites\\bigEat0.png",
"x": 0,
"y": 0,
"w": 46,
"h": 55
},
"bigEat1": {
"path": "dist\\sprites\\bigEat1.png",
"x": 46,
"y": 0,
"w": 46,
"h": 55
},
"src": "dist/sprites/all.min.png"
}
}
.babyFade0{
background:url(./dist/sprites/all.min.png) 0 0;
width:41;
height:46;
}
.bigEat0{
background:url(./dist/sprites/all.min.png) 251 0;
width:46;
height:55;
}
.bigEat1{
background:url(./dist/sprites/all.min.png) 297 0;
width:46;
height:55;
}
.bigEat2{
background:url(./dist/sprites/all.min.png) 343 0;
width:46;
height:55;
}