在css开发中有一件非常令人头疼的东西:拼背景图片。比如一个项目中有三种按钮:button-normal, button-submit, button-cancel。一般的方式是个人手动在PSD中新建一个较大的画布,把三个按钮分别移到该画布上,最后通过background-position定位。这个过程中有两步是比较耗时且不合理的:
1.在css中对需要的图标进行定位,尤其是集成度非常高的图片,一张图片中可能有数十个图标,而且图标之间的位置并没有绝对正确的规律,没有像素眼去调整位置是很消磨耐心的工作;
2.每一次有新的图标需要更新,都要注意不能移动以前图片的已有位置,然后再把新的图片添加进去,接着去为background-position定位。
但是出于对性能的追求,这件事情有时候还不得不做。事实上,在CSS和JavaScript文件的处理上也有类似的情况,目前已经有很好的解决办法,当人们厌倦了一直重复某件事情的时候,最终总会殊途同归:自动化。以Grunt举例,我想把scripts中所有的js文件合并并成app.min.js,grunt配置核心代码如下:
// Merge javascript files.
concat:
js: { src: ‘/scripts/**/*.js‘, dest: ‘/scripts/temp/app.js‘ }
},
// Minifire javascript files.
uglify: {
build: {
files: { ‘/scripts/app.min.js‘: ‘/scripts/temp/app.js‘ }
}
}
一句grunt命令操作完成。
Glue
接下来介绍的这个命令行工具glue做的甚至更多,假设我们有一个存放图片的文件夹scene,在同级目录下执行:
glue img css
发现img文件夹下的图片自动合并至css文件夹,生成以img命名的图片:img.png,和img.css,这个图片我们都知道是合并后的总图片,这个css文件是什么?打开看看:
.sprite-scene-weibo,
.website {
background-image: url(‘scene.png‘);
background-repeat: no-repeat;
}
.sprite-scene-weibo {
background-position: 0 0;
width: 52px;
height: 52px;
}
.sprite-scene-website {
background-position: -52px 0;
width: 52px;
height: 52px;
}
原来是背景图片定位的css代码!这样的话大功告成,之前提出的两个问题全部解决!如果有图片更新,把图片放到文件夹再执行glue命令即可。
还没有完,Glue做的比我们想象的更多,列一点可能是最无关紧要的:Retina支持。
glue img css --retina
会发现除了生成一个scene.png以外,多了一个scene@2x.png。非常简单,配合retina.js使用优化Retina也只是分分钟!
时间紧迫,午休结束,安装方法和更详细的使用请到自行到Glue的Github主页查看:https://github.com/jorgebastida/glue
图形工具
也试用了几个图形化的工具,感觉都不太满意,UI难看,用起来也不如命令行来的方便,有一个基于Adobe air的bg2css欢迎各位去尝试。