css - 是否有根据 css 生成图像 Sprite 的繁重任务？

Question

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

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

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

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

是否可以使用 grunt task 自动生成？

Answer 1

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

Grunt task that generates a sprite from images referenced in a stylesheet and then updates the references with the new sprite image and positions

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