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

jopen 9年前

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可扩展性大，比如你不想要这种输出格式，你可以更改mustcache的css模板设置：

node_modules\css-sprite\lib\templates\css.mustache

{{#items}}  {{class}} {    background-image: url('{{{escaped_image}}}.png');    background-position: {{px.offset_x}} {{px.offset_y}};  }  {{/items}}

这样输出就会类似于：

.icon-account {    background-image: url('../img/icons.png');    background-position: -10px -10px;  }  .icon-dashboard {    background-image: url('../img/icons.png');    background-position: -10px -54px;  }

当你有些icon图标不想使用自动合并后的图片时，用这种方法可以让每一个自动合并的图标样式分别复写图片地址，还是非常方便的。

css-sprite支持众多CSS扩展样式语言，如css, less, sass, scss 或 stylus，如输出设置为scss时（"processor: scss" ）的使用：

@import 'sprite'; // 导入自动生成的scss文件 (sprite.sc ss)    // camera 图标 ($camera对应源文件目录的 camera.png 文件)  .icon-camera {    @include sprite($camera);  }    // cart 图标 (指定目录中的 cart.png 图片)  .icon-cart {    @include sprite($cart);  }

css-sprites可支持 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：sprite名 /    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 /  }</pre>
  输出
  
  #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;  } 

  此工具其实是将注释的那行 background-image 替换成了 background-position。 因此如果小图标也是一个小的CSS Sprites图标组合的话也是支持的，不过需要将background-position写在上面，以便能让生成的background- position将其覆盖，设置sprint-margin 指定偏移多少，与之前的background-position要对应：
  
  .icon-security{    background-position: 4px 2px;    background-repeat: no-repeat;      /注意 sprite-margin-left： sprite-margin-top 用来指定小图片的偏移 /    background-image: url("../images/16x16/Keygif.png");   /** sprite-ref: mysprite; sprite-margin-left: 4px; sprite-margin-top: 2px; /  }</pre>
  SmartSprites的定制能力还是比较强的，输出不依赖文件名，美中不足的是注释的方式并不能在Sass, Compass， Less等扩展CSS标记语言中使用。
  
  使用：直接调用此命令可直接生成合并好的CSS文件：tool/smartsprites/lib是你安装smartsprites时那些jar所存放的目录
  
  java -Xms64m -Xmx256m -Djava.ext.dirs=tool/smartsprites/lib org.carrot2.labs.smartsprites.SmartSprites web/css/icons.css

  若设置正确则会生成一个 mysprite-sprite.css 的文件。 SmartSprites的最好好处可能就是能与ant/maven的无缝集成了。
  
  
  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;}
来自：http://ourjs.com/detail/54dc678c232227083e000032

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

NodeJS css-sprite

Java: SmartSprites

Ruby Compass CSS Sprite Helpers

Python Glue

相关经验

目录