CSS Sprites图片拼合生成器实现思路

在对WEB前端做性能优化时,为了有效减少http请求数,通常会把Web用到的图片合并成一张大图,采用CSS的background-position 属性,控制页面的图片显示。

问题是,目前虽然有这么一套工具,可以自动把若干小图片合并成一个大图(CSS Sprites),并生成css class .但他们都是在线工具,用户上传小图片,然后生成大图片,一个本来客户端完成的工具做成在线web服务的方式,不太实用。

在这里,我来谈谈我自己的实现思路:
1.不采用GUI形式,而采用CLI方式实现该程序,暂定该程序名为csssprite

2.在命令行中执行 csssprite pre c:\small_imgs\ 
pre, css class名称前缀
c:\small_imgs是网站用到的所有小图片的存放路径

3.最终程序生成:
c:\small_imgs\final\main.png,合并后的大图
c:\small_imgs\final\main.css,合并后的css类
like this
.pre_a{background-position:“”}
.pre_b{background-position:“”}
a,b等是小图片的名字.

4.实现算法
至于说如何实现算法的,以后再发布出来,大家各自发挥!

5.可维护

当新增、去除某个小图片时,保证之前生成的css class依然能用。 

希望能有人以开源的形式实现,最好windows,linux平台都通用,且不需要安装太多的runtime lib~ 

 

原文地址:https://www.cnblogs.com/gaotianpu/p/1705109.html