grunt-css-sprite - 凡事预则立,不预则废

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

  1. 对css文件进行处理,收集切片序列,生成雪碧图
  2. 在原css代码中为切片添加background-position属性
  3. 生成用于高清设备的高清雪碧图,并在css文件末尾追加媒体查询代码
  4. 支持 image-set 配置高清雪碧图
  5. 在引用雪碧图的位置打上时间戳
  6. 在样式末尾追加时间戳
  7. 按照时间戳命名文件

使用 & 帮助更新

NPM:
Github:

5评论

  1. 这个我尝试了不支持PNG之外的格式,比如JPG。
    之前的项目(grunt-sprite)是支持的。

    laoshu133 于 2014-7-30 10:28:16 回复
    @CoolGuy
    考虑图标绝大多数的情况下都是 png 的,默认去掉对 gm 的依赖,如果需要可以安装 gm,然后将参数 `engine` 改为 `gm`
    https://github.com/laoshu133/grunt-css-sprite/#%E5%8F%AF%E9%80%89%E4%BE%9D%E8%B5%96

    回复

  2. 回复

  3. 当我使用img@2x.png的时候,报错了,错误信息是:Fatal error: Unable to read "./lib/place.png" file (Error code: ENOENT),请问能不能帮我解决一下

    laoshu133 于 2014-10-9 10:13:22 回复
    @coolle
    能否给出更为详细的错误日志?

    回复

  4. 在安装grunt-css-sprite 的时候 会出现“gm”and “phantom.js”不是内部命令或外部命令,也不是可运行的程序或批处理文件 这是正常的么?

    laoshu133 于 2014-12-10 16:50:43 回复
    @zmhan.zhu
    属正常情况;
    https://github.com/laoshu133/grunt-css-sprite/issues/19
    zmhan.zhu 于 2014-12-10 22:19:55 回复
    @zmhan.zhu
    恩,下午配置出来了,非常感谢

    回复

  5. dsads

    回复

发表评论

最新评论及回复

    loading

最近发表

    loading

网站分类

    loading

文章归档

    loading

友情链接

Top Comments Footer