假设我有以下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-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