CODEWITHSUNDEEP
cssspritegruntjs
Erik
Erik

Reputation: 14770

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

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?

Upvotes: 7

Views: 5838

Answers (2)

Jim
Jim

Reputation: 3294

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

Upvotes: 8

iGanja
iGanja

Reputation: 2474

How about using Grunt Imagine?

Upvotes: 3

Related Questions