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