是否有根据css生成图像精灵的繁琐任务？

Question

假设我有以下style.css文件:

h1 {
  padding: 10px;
  background: url('/img/header.png');
}
p {
   background: url('/img/p.png');
}

我需要自动为这个css制作图像精灵.我需要得到这样的东西:

h1 {
  padding: 10px;
  background: url('/img/sprite.png') -47px 0;
}
p {
   background: url('/img/sprite.png') -130px 0;
}

是否可以通过使用grunt任务自动生成？

Answer 1

看起来你正在寻找这个grunt-sprite-generator.从文档:

Grunt任务,从样式表中引用的图像生成精灵,然后使用新的精灵图像和位置更新参考

另一个看起来符合要求的工具是grunt-spritesmith

Answer 2

使用Grunt Imagine怎么样？