CSS Sprite小图片自动合并工具

浏览数：23 / 时间：2015年06月09日

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

NodeJS css-sprite

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

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

安装

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

npm install [email protected]

使用时需要创建一个js文件，此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的图片合并工具还有一些，但大多依赖第三方图像处理库，此处略。

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

CSS Sprite小图片自动合并工具