Are there any tasks for creating sprite images on 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 sprite an image 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 automate using the grunt task?

Answer 1

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

The Grunt task, which generates a sprite from the images specified in the stylesheet, and then updates the links using a new sprite image and positions

Another tool that fits the bill: grunt-spritesmith

Answer 2

How about using Grunt Imagine ?