Is there grunt tasks for generating images sprites according by css?

Question

Let's say I have the following style.css file:

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

I need to make image sprite for this css automatically. I need to get something like this:

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

Is it possible to make automaticaly by using grunt task?

Answer 1

It looks like you are looking for this grunt-sprite-generator. From the documentation:

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

Another tool that looks to fit the bill is grunt-spritesmith

Answer 2

How about using Grunt Imagine?