OurJS


OurJS-我们的JS, 我们的技术-IT文摘; 专注JS相关领域;
我们热爱编程, 我们热爱技术;我们是高大上, 有品味的码农;

欢迎您订阅我们的技术周刊


我们会向您分享我们精心收集整理的,最新的行业资讯,技术动态,外文翻译,热点文章;
我们使用第三方邮件列表向您推送,我们不保存您的任何个人资料,注重您的隐私,您可以随时退订,

欢迎分享您的观点,经验,技巧,心得

让我们一起找寻程序员的快乐,探索技术, 发现IT人生的乐趣;


本网站使用缓存技术每次加载仅需很小流量, 可在手机中流畅浏览;
如果您发现任何BUG,请即时告知我们: ourjs(at)ourjs.com

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


分享到
分类 心得体会   关键字 JavaScript   发布 kris  1423730572746
注意 转载须保留原文链接,译文链接,作者译者等信息。  
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

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



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 */
}

输出

#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-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; */
}

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;}



社区评论 ( Beta版 )
OnceDoc 您自己的企业内容管理系统——文档、流程、知识库、报表、网盘All In One

访问404页面,寻找丢失儿童
 热门文章 - 分享最多
  1. 从一行CSS调试代码中学到的JavaScript知识
  2. 理解Node.js的事件循环(Event Loop)和线程池
  3. 在nodejs中使用Redis缓存和查询数据及Session持久化(Express)
  4. 即将推出的CSS4 Level 4 Selectors(第4级选择器)
  5. 让我们写快速的JavaScript,JS性能优化小窍门
  6. 什么是Viewport Meta(width详解)及在手机上的应用
  7. 专为控制打印设计的CSS样式
  8. io.js新支持的ECMAScript 6功能特性详解
  9. RedMonk的语言排名:JavaScript,Java保持领先;Go未进前20
  10. Java官方安装包捆绑百度卫士杀毒软件
  11. AirJD-简单好用的免费建站工具

 相关阅读 - 心得体会
  1. 即将推出的CSS4 Level 4 Selectors(第4级选择器)
  2. 主流JavaScript MVC框架性能比较测试:Angular vs Backbone vs Ember
  3. [译]Node.js 框架比较: Express vs. Koa vs. Hapi
  4. 从PhantomJS迁移到node-webkit:自动化测试框架简单比较
  5. 保卫AngularJS
  6. Angular.JS出了什么问题?
  7. 我们不需要JavaScript框架
  8. 各大邮件群发/订阅代理服务商比较
  9. 使用Node编写的Sublime代码格式化工具插件(HTML/CSS/JS)
  10. CTO这点事

 关键字 - JavaScript
  1. 可视化Web报表OnceVI中用户输入表单验证与提交
  2. 少年,不要滥用箭头函数啊:JS中lambda表达式的优缺点和使用场景
  3. 如何基于SVG矢量图制作一个可填写信息的可视化表单-OnceVI
  4. OnceVI报表制作入门—如何将用户的json数据可视化成名片展示
  5. AngularJS在大型单页面应用中的性能优化(二)
  6. JavaScript中的继承,构造函数以及new关键字的作用
  7. JavaScript条形码生成和扫码识别(Barcode scan)开源库
  8. NodeBots-JavaScript在智能设备驱动(物联网)中的崛起
  9. 7个最新的实用性 JavaScript MV*框架
  10. 抛弃jQuery,深入原生的JavaScript

 欢迎订阅 - 技术周刊

我们热爱编程, 我们热爱技术; 我们是高端, 大气, 上档次, 有品味, 时刻需要和国际接轨的码农; 欢迎您订阅我们的技术周刊; 您只需要在右上角输入您的邮箱即可; 我们注重您的隐私,您可以随时退订.
加入我们吧! 让我们一起找寻码农的快乐,探索技术, 发现IT人生的乐趣;


 关注我们

我们的微信公众号: ourjs-com
打开微信扫一扫即可关注我们:
IT文摘-程序员(码农)技术周刊

ourjs官方微信号