easy-sprite

easy-sprite

easy-sprite是一个简洁的css雪碧图制作工具。它能根据指定规则，将小图片合并为雪碧图。easy-sprite采用css注释指定雪碧图合并规则，能够灵活的满足多种需求。支持自动生成低倍率图片，轻松搞定屏幕适配。

安装

npm install ease-sprite --save

使用

var sprite = require('ease-sprite');
sprite(options, cb);

配置说明

• **src：**需要处理的css文件。
• **dest：**css输出文件名。
• **spriteDir：**雪碧图输出目录。
• **margin：**雪碧图排列的最小间距离，默认10px。
• **compress：**输出css文件是否需要压缩，默认false。
• **sourcemap：**是否需要输出sourcemap，默认false。

雪碧图声明

雪碧图的声明采用css注释。格式为：/* @sprite:[雪碧图源文件(夹)]=>雪碧图输出文件?selector=背景图调用选择器&alg=图片排列算法 */。

雪碧图源文件的参考路径为当前css路径，雪碧图输出文件的参考路径为spriteDir配置项；生成雪碧图后，需要统一调用背景图，selector参数可以指定调用背景图的选择器。缺省情况下，工具会采用集体声明的方式统一调用背景图；alg参数可以指定图片排列算法，有三个可选值binary、vertical、horizontal。binary为二叉树排列算法、这是一种最节省空间的算法。vertical为从上到下垂直排列。horizontal为从左到右水平排列。在传参时，为了简便可以用首字母代替。

声明示例

/* @sprite:[../img/icon1.png, ../img/icon2.png] => sprite-icon.png?selector=.test */
/* @sprite:[../img/button] => sprite-button.png?alg=v */
.icon{width:10px;height:10px;}
.icon-1{background:url(../img/icon1.png);}
.icon-2{background:url(../img/icon2.png);}
.button1{width:60px; height:30px; background:url(../img/button/1.png);
.button2{width:80px; height:40px; background:url(../img/button/2.png);

sprite 处理后的结果为：

.button1, .button2{background:url(../spriteDir/sprite-button.png);}
.icon{width:10px; height:10px; background-image:url(../spriteDir/sprite-icon.png);}
.icon-1{background-position:0 0;}
.icon-2{background-position:20px 0;}
.button1{width:60px; height:30px; background-position:0, 0;};
.button2{width:80px; height:40px; background-position:0 50px};

可见处理后的css单个背景图调用已经没有了，取而代之是backgroun-position和统一的背景图调用。

关于二倍图

为了适配高分屏，通常需要做两套大小的图片。有了sprite工具，则只需要提供一套大图，sprite工具会压缩出一套小图，并通过media query来决定实际用什么图。支持二倍图非常简单，只需将雪碧图输出文件的命名定为@2x.png、-2x.png或_2x.png，工具在识别出这类雪碧图输出后就会自动生成对应的一倍图和media queery等。

License

MIT:http://vinnyguitar.mit-license.org