Grunt Light Sprite

轻量的CSS精灵图片(sprite sheet)生成器（Grunt插件）。
目前现有的工具做的都较为强大，但是配置和使用都比较复杂，不够简单且灵活易用。
本插件旨在最小配置的情况下，实现较为灵活的应用。

本插件要求需要添加到精灵图片的小图片必须以

background:url(your-image-path.png);//sprite(your-new-image-path.png) 

的形式出现，插件会自动匹配以此模式出现的背景图片，生成以sprite(your-new-image-path.png)括号中的新路径为文件名的图片。不同的小图片可以添加至相同文件名的精灵图片中。可以精确指定需要添加精灵图片的小图片，也能够精确的指定哪些图片合并至哪个大图片。

在开发时保留原始的图片以及less文件，只在生成时合并图片并处理less文件，替换图片并添加background-position属性。

关于服务器端强制清理缓存，为图片以及css文件添加指纹等更多内容，请参考Frontend Workflow以及Grunt前端项目模板

安装及配置

安装最新版本的Grunt并使用npm安装依赖，在Gruntfile.js中加载插件，并在initConfig中添加插件配置。

This plugin requires Grunt ~0.4.5

If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:

npm install https://github.com/dukai/grunt-light-sprite.git --save-dev

Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:

grunt.loadNpmTasks('grunt-light-srpite');

The "sprite" task

Overview

In your project's Gruntfile, add a section named sprite to the data object passed into grunt.initConfig().

grunt.initConfig({
  sprite: {
    default_options: {
      padding: 0,
      files: [
        {
          expand: true,     
          cwd: 'test/less/',  //less or css file to be processed dir
          src: ['*.less'], 
          dest: 'test/less-dest/', //dest dir
          ext: '.less',  
          extDot: 'first' 
        }
      ]
    }
  },
});

Options

采用默认最小配置，目前仅支持png图片，二叉树方式布局

Usage Examples

a.less 处理前

.img{
  .rect(165px, 106px);
  background: url(../images/show-shield.png);//sprite(../images/sec-icos.png) 
  margin: 80px auto 10px;
}
.ico-check{
  .rect(22px);
  background:url(../images/ico-check.png);//sprite(../images/pay-icos.png) 
  .mr(4px);
}
.ico-alert{
  .rect(22px);
  background:url(../images/ico-alert.png);//sprite(../images/pay-icos.png) 
  .mr(4px);
}
.ico-sec-shield{
  .rect(32px);
  background:url(../images/ico-sec-shield.png);//sprite(../images/mem-icos.png) 
}	
.ico-mem-arrow{
  .rect(12px);
}
 
.ico-check{
  .rect(22px);
  background:url(../images/ico-check.png);//sprite(../images/pay-icos.png) 
  .mr(4px);
}
.ico-mem-arrow{
  background: url(../images/ico-member-arrow-white.png);//sprite(../images/mem-icos.png) 
}
 

a.less 处理后

.img{
  .rect(165px, 106px);
  background: url(../images/sec-icos.png);//sprite(../images/sec-icos.png) 
  background-position: -0px -0px;
  margin: 80px auto 10px;
}
.ico-check{
  .rect(22px);
  background:url(../images/pay-icos.png);//sprite(../images/pay-icos.png) 
  background-position: -0px -0px;
  .mr(4px);
}
.ico-alert{
  .rect(22px);
  background:url(../images/pay-icos.png);//sprite(../images/pay-icos.png) 
  background-position: -22px -0px;
  .mr(4px);
}
.ico-sec-shield{
  .rect(32px);
  background:url(../images/mem-icos.png);//sprite(../images/mem-icos.png) 
  background-position: -165px -112px;
}	
.ico-mem-arrow{
  .rect(12px);
}
 
.ico-check{
  .rect(22px);
  background:url(../images/pay-icos.png);//sprite(../images/pay-icos.png) 
  background-position: -0px -0px;
  .mr(4px);
}
.ico-mem-arrow{
  background: url(../images/mem-icos.png);//sprite(../images/mem-icos.png) 
  background-position: -32px -12px;
}
 

b.less 处理前

.ico-sec-shield{
  .rect(32px);
  background:url(../images/ico-sec-shield.png);//sprite(../images/sec-icos.png) 
  .abs;
  left: -40px;
  top: 6px;
}
 
.ico-sec-check{
  .rect(56px);
  background:url(../images/ico-sec-check-disable.png);//sprite(../images/sec-icos.png) 
}
 
.ico-check{
  .rect(22px);
  background:url(../images/ico-check.png);//sprite(../images/pay-icos.png) 
  .mr(4px);
}
.img{
  .rect(165px, 106px);
  background: url(../images/show-shield.png);//sprite(../images/sec-icos.png) 
  margin: 80px auto 10px;
}
.ico-step{
  background: url(../images/ico-sec-cicle-disable.png);//sprite(../images/sec-icos.png) 
  .rect(56px);
  line-height: 56px;
  text-align: center;
 
 
  &.active{
    background: url(../images/ico-sec-circle.png);//sprite(../images/sec-icos.png) 
    span,strong{
      color: #00c4b4;
    }
  }
 
  &.checked{
    background: url(../images/ico-sec-check.png);//sprite(../images/sec-icos.png) 
    span,strong{
      color: #00c4b4;
    }
    span{
      text-indent: -999em;
    }
  }
 
  span{
    .d-b;
    .fc(24px, #fff);
  }
 
  strong{
    .d-b;
    .fc(18px, #000);
    width: 100px;
    .abs;
    left: 50%;
    .ml(-50px);
  }
}
 
 

b.less 处理后

.ico-sec-shield{
  .rect(32px);
  background:url(../images/sec-icos.png);//sprite(../images/sec-icos.png) 
  background-position: -165px -112px;
  .abs;
  left: -40px;
  top: 6px;
}
 
.ico-sec-check{
  .rect(56px);
  background:url(../images/sec-icos.png);//sprite(../images/sec-icos.png) 
  background-position: -0px -106px;
}
 
.ico-check{
  .rect(22px);
  background:url(../images/pay-icos.png);//sprite(../images/pay-icos.png) 
  background-position: -0px -0px;
  .mr(4px);
}
.img{
  .rect(165px, 106px);
  background: url(../images/sec-icos.png);//sprite(../images/sec-icos.png) 
  background-position: -0px -0px;
  margin: 80px auto 10px;
}
.ico-step{
  background: url(../images/sec-icos.png);//sprite(../images/sec-icos.png) 
  background-position: -56px -106px;
  .rect(56px);
  line-height: 56px;
  text-align: center;
 
 
  &.active{
    background: url(../images/sec-icos.png);//sprite(../images/sec-icos.png) 
    background-position: -165px -0px;
    span,strong{
      color: #00c4b4;
    }
  }
 
  &.checked{
    background: url(../images/sec-icos.png);//sprite(../images/sec-icos.png) 
    background-position: -165px -56px;
    span,strong{
      color: #00c4b4;
    }
    span{
      text-indent: -999em;
    }
  }
 
  span{
    .d-b;
    .fc(24px, #fff);
  }
 
  strong{
    .d-b;
    .fc(18px, #000);
    width: 100px;
    .abs;
    left: 50%;
    .ml(-50px);
  }
}

合并好的图片会根据命名自动在指定目录生成指定文件。

Contributing

In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Grunt.

Release History

0.1.6 添加padding配置项

0.0.1 初始版本

Thanks

感谢 spritesmith