Generate sprites from retina images

This "Basic" task generate images from large original (@2x) sources, optimize sprite via imgo and fix half-pixel bug (retina-images with odd width/height).

Inspired by grunt-tamia-sprite.

Installation

This plugin requires Grunt 0.4. Uses grunt-tamia-sprite, grunt-imgo (optional) tasks and GraphicsMagick for node.

$3

Download and install GraphicsMagick or ImageMagick. In Mac OS X, you can simply use Homebrew and do:

brew install imagemagick
brew install graphicsmagick

Then install grunt-spritify and deps tasks:

npm install -D grunt-tamia-sprite grunt-imgo grunt-spritify

Add to your Gruntfile.js:

``javascript
grunt.loadNpmTasks('grunt-tamia-sprite');
grunt.loadNpmTasks('grunt-imgo');
grunt.loadNpmTasks('grunt-spritify');
`

Usage

Pass folder as argument for task:

grunt spritify:${PWD}

Use ${PWD} for generate sprite in current folder.

By default task try to find /origin/*.png original files for sprite.




Configuration

Then add section named spritify inside grunt.initConfig(). See next section for details.

$3


Options inside options object.

$3

Original files for sprite. Support globbing patterns. Default: origin/*.png

$3

Dest folder with generated for grunt-tamia-sprite images. Default: src

$3

Sprite name. Pass string or function (first argument — dir, passed in task arguments). Default: bem-liked name notation by path __7up.png, support mods: block_mod__7up.png for path block/_mod/.

$3

Object, passed in gm options. Pass the option {imageMagick: true} to use ImageMagick instead of gm

$3

Object passed to grunt-tamia-sprite task. Default:

`
{
destStyl: false
}
`

By default grunt-tamia-sprite generate .json file with sprite variables

$3


Object passed to grunt-imgo task. Pass imgo: false` if need disable imgo optimization.