转载

CSS Sprite小图片自动合并工具（NodeJS,Python,Java,Ruby）

css-sprite是将css样式中零星的小图标，小图片合并成大图显示，这样能减小服务器并发连接数，减小服务器负载和带宽使用，有很高的实用价值。这里介绍一些自动合并图片并生成样式的工具。

NodeJS css-sprite

css-sprite是一个基于NodeJS实现的css切图自动合并工具，能自动将小图片合成大图，支持retina sprites和base64输出格式。

注* retina sprites视网膜屏幕指的是接近人眼能够直观感受到的基础色素。Base64是将图片转化成Base64字符串嵌入CSS文件中。

安装

注* 测试0.9.0可在Winodws上是正常安装的

npm install css-sprite@0.9.0

使用时需要创建一个node.js程序文件，如此node.js将web/icon目录下的png图标合并到web/img下，并生成web/css/icons.css文件

var sprite = require('css-sprite');
sprite.create({
  src       : ['web/icon/*.png'],  //小图标所在目录
  out       : 'web/img',           //大图标所在目录
  name      : 'icons',             //大图标名称
  style     : 'web/css/icons.css', //样式文件
  prefix    : 'icon',   //样式前辍
  processor : 'css',    //文件格式： css; 支持less,sass,scss,stylus等扩展样式语言
  cssPath   : '../img', //css文件相对于图标文件的相对路径
  margin    : 10        //图片间隔，默认垂直排列
}, function () {
  console.log('done');
});

输出的文件大概如下：

.icon {
  background-image: url('../img/icons.png');
}

.icon-first {
  background-position: -10px -44px;
  width: 20px;
  height: 20px;
}

.icon-last {
  background-position: -10px -84px;
  width: 20px;
  height: 20px;
}

css-sprite 基于node.js和npm可扩展性大，支持众多CSS扩展样式语言，如css,less, sass, scss 或 stylus

并且可支持Gulp/Grunt 构建工具扩展，还可支持自定义输出模板等，功能丰富，但因较新，有些版本可能不稳定。

注* 基于Node.JS的图片合并工具还有一些，但大多依赖第三方图像处理库，此处略。

Java: SmartSprites

SmartSprites是基于Java实现的CSS切图自动合并工具，你只需要在CSS样式文件中添加一些注释即可使用；比如：希望最终将所有小图片都垂直排列输出到 mysprite.png 中，则可以这样写。

/*配置输出的大图片地址、排列方向，间隙等*/
/** sprite: mysprite; sprite-image: url('../img/mysprite.png'); sprite-layout: vertical */

#web {
  width: 17px; height: 17px;
  background-repeat: no-repeat;
  /*将web.gif添加到mysprite.png中， 只需要在后面添加 sprite-ref */
  background-image: url(../img/web.gif); /** sprite-ref: mysprite; */
}

#logo {
  width: 50px; height: 50px;
  background-repeat: no-repeat;
  background-position: top right;
  background-image: url(../img/logo.png); /** sprite-ref: mysprite; sprite-alignment: right */
}

输出

#web { 
  width: 17px; height: 17px; 
  background-repeat: no-repeat; 
  background-image: url('../img/mysprite.png');
  background-position: left -0px;
} 

#logo { 
  width: 50px; height: 50px; 
  background-repeat: no-repeat; 
  background-position: top right; 
  background-image: url('../img/mysprite.png');
  background-position: right -17px;
}

SmartSprites的定制能力还是比较强的，美中不足的是注释的方式并不能在Sass, Compass， Less等扩展CSS标记语言中使用。

Ruby Compass CSS Sprite Helpers

Css Sprite Helper是Compass CSS扩展（可编程）样式语言带来的一个福利。

此插件支持再次手工指定Background的位置偏移，有比较强的手工定制性，如：

$icons: sprite-map("icons/*.png"); //其中有一个 icons/new.png 小图标
background: sprite($icons, new) no-repeat;

会被压缩成

background: url('/images/icons.png?12345678') 0 -24px no-repeat;

使用Compass需要引入Ruby且无法直接在原生CSS文件中使用。

还有 sprite-factory 等这个是托管在gem上面的

Python Glue

Glue是基于Python实现的一个CSS Sprites切图自动生成工具。它生成的CSS小图标所对应的样式名以目录名+文件名组织：如.sprite-icons-zoom_out { } 。

项目主页 https://github.com/jorgebastida/glue

安装 http://glue.readthedocs.org/en/latest/installation.html

Linux

$ apt-get install libjpeg62 libjpeg62-dev zlib1g-dev python-dev
$ sudo pip install glue

使用：

$ glue icons sprites

icons， sprites都是文件夹，生成的目录结构如下：

sprites

├── icons.css

└── icons.png

生成的CSS代码如下

.sprite-icons-zoom_out{ background:url('sprites/icons/icons.png'); top:0; left:0; no-repeat;}
.sprite-icons-zoom_in{ background:url('sprites/icons/icons.png'); top:0; left:-16; no-repeat;}
.sprite-icons-zoom{ background:url('sprites/icons/icons.png'); top:-16; left:0; no-repeat;}

正文到此结束