切片合并雪碧图:grunt-css-sprite

jopen 10年前

grunt-css-sprite

这是什么

这是一个帮助前端开发工程师将 css 代码中的切片合并成雪碧图的工具; 其灵感来源于 grunt-sprite,由于其配置参数限制目录结构等,不能满足通用项目需求,重新造轮子发布; 它的主要功能是:

  1. 对 css 文件进行处理,收集切片序列,生成雪碧图

  2. 在原css代码中为切片添加background-position属性

  3. 生成用于高清设备的高清雪碧图,并在css文件末尾追加媒体查询代码

  4. 生成高清设备雪碧图,使用 image-set

  5. 支持选择器提取,进一步优化CSS文件大小

  6. 在引用雪碧图的位置打上时间戳

  7. 在样式末尾追加时间戳

  8. 按照时间戳命名文件

项目主页:http://www.open-open.com/lib/view/home/1424699095296