是否有根据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？