主要做精灵图自动合并,并返回合并后的信息,目前支持的功能较少,仅支持主要的合并配置
npm install --save redsprite
var redSprite = require('redsprite');
redSprite.create({
filemap: {
'outputfilepath0': ['inputfilepath0', 'inputfilepath1'],
'outputfilepath1': ['inputfilepath2', 'inputfilepath3']
},
margin: 10,
sort: true,
orientation: 0, // 0 - 纵向排列,1 - 横向排列
tempate: './tpl.css', // 生成的雪碧图信息文件模板,要求为utf-8编码
infosrc: './out/tpl.info.css' // 生成的雪碧图信息文件
}, function(err, res) {
// res的结构
// {
// 'outputfilepath0': {
// 'inputfilepath0': {width:xx, height:xx, x:xx, y:xx},
// 'inputfilepath1': {width:xx, height:xx, x:xx, y:xx}
// },
// 'outputfilepath1': {
// 'inputfilepath2': {width:xx, height:xx, x:xx, y:xx},
// 'inputfilepath3': {width:xx, height:xx, x:xx, y:xx}
// }
// }
});
使用方法与其他模板引擎类似
{if condition}
// code
{elseif condition}
// code
{else}
// code
{/if}
{list arr as item}
// item_index --> 下标
// code
{/list}
{var a = 3} // 定义变量a
注意插值语法里{
前面有一个$
符号
${a} // 插入变量a的值
注入到模板的变量只有一个data数组,结构如下
data: [
{
path: 'xxx', // 大图路径
name: 'xxx', // 大图名称
ext: 'xxx', // 大图后缀
width: xxx,
height: xxx,
items: [
{
path: 'xxx', // 小图路径
name: 'xxx', // 小图名称
ext: 'xxx', // 小图后缀
width: xxx,
height: xxx,
x: xxx,
y: xxx
}
]
}
]
MIT