問題

私は次の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タスクを使用して自動化することは可能ですか?

  ベストアンサー

この grunt-spritegenerator を探しているようです。ドキュメントから:

スタイルシートで参照される画像からスプライトを生成し、新しいスプライト画像と位置で参照を更新するGruntタスク

法案に合うように見えるもう一つのツールは、 grunt-spritesmith

  同じタグがついた質問を見る

cssspritegruntjs