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;
}</pre>
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);
}</pre>
css-sprites可支持 Gulp/Grunt 構建工具擴展， 還可支持自定義輸出模板等，功能豐富，但因較新，有些版本可能不穩定。并且此工具支持的輸出格式太多，不夠小巧，包文件偏大。 </div>
注* 基于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;
} </pre>
此工具其實是將注釋的那行 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
本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！