grunt-sprite-packer
v0.1.7
Published
Sprite packer converts multiple png files into single sprite file using efficient bin packer algorithm.
Downloads
99
Readme
grunt-sprite-packer
Sprite packer converts multiple png files into single sprite file using efficient packer algorithm. Metadata (names, dimensions and positions of individual sprites) are written into separate template-based text file.
Getting Started
This plugin requires Grunt ~0.4.1
and ImageMagick library.
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 grunt-sprite-packer --save-dev
Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:
grunt.loadNpmTasks('grunt-sprite-packer');
ImageMagick library have to be installed in your system. See www.imagemagick.org for installation instructions.
The "spritepacker" task
Overview
This task converts multiple images into single image using efficient packing algorithm. It outputs two files: resulting sprite image and a text file with information about positions and dimensions of individual sprites. This text file has no fixed format or structure, instead it is generated using a handlebars template, so that you have full control of its format. It can be plain CSS with classes or some declarations for additional processing (LESS, SASS, Stylus or JSON).
NEW: Since version 0.1.7, Spritepacker can now work with SVG files. See svg option for details. This is an experimental feature, please report any issues you may encounter.
In your project's Gruntfile, add a section named spritepacker
to the data object passed into grunt.initConfig()
.
grunt.initConfig({
spritepacker: {
default_options: {
options: {
// Path to the template for generating metafile:
template: 'css/sprites.css.tpl',
// Destination metafile:
destCss: 'css/sprites.css',
// Base URL for sprite image, used in template
baseUrl: '../img/'
},
files: {
'img/sprites.png': ['img/sprites/*.png']
}
}
}
})
Options
options.template
Type: String
A path to the template for generating metafile. Template is processed through Handlebars with the following variables:
sprites
- an array of object with metainfo for each spritebaseUrl
- base URL from task optionsfileName
- file name of generated sprite file (i.e. task destination)width
- width of generated sprite fileheight
- height of generated sprite filetimestamp
- timestamp (can be used in template as image url parameter to prevent caching issues) - deprecated, use checksum insteadchecksum
- md5 hash of the generated sprite image file (can be used in template as image url parameter to prevent caching issues)
Each item in sprites array contains the following properties:
name
- name of the sprite (= original file name without extension)x
- x position of the sprite in generated sprite filey
- y position of the sprite in generated sprite filewidth
- width of the spriteheight
- height of the sprite
Example of template file for generating simple CSS:
{{#sprites}}.{{name}} = { background: url('{{../baseUrl}}{{../fileName}}') no-repeat -{{x}}px -{{y}}px; width: {{width}}px; height: {{height}}px; }
{{/sprites}}
Example of template file for generating Stylus declarations to be processed later by some Stylus function:
{{#sprites}}{{name}} = ('{{../baseUrl}}{{../fileName}}' -{{x}}px -{{y}}px {{width}}px {{height}}px {{../name}})
{{/sprites}}
options.template
Type: String
A path to the template file.
options.destCss
Type: String
A path to the metafile that will be generated from the template.
options.baseUrl
Type: String
URL path to the generated sprite file.
options.padding
Type: Number
Default: 0
White space that will be added as a padding around every sprite (in px). It is useful to prevent bleeding pixels from one sprite to another when scaled / interpolated in the browser.
options.format
Type: String
Default: 'png32'
Output file format. Any image format supported by ImageMagick should work (tested 'png32'
and 'jpg'
).
options.background
Type: String
Default: 'none'
Background color of output image. 'none'
= transparent, '#ffffff'
= white, '#ff0000'
= red etc.
options.quality
Type: String
Default: '100%'
Compression quality of output file. Has no effect for file formats other than jpg.
options.evenPixels
Type: Boolean
Default: false
When set to true
, dimensions of sprites will be aligned to even pixels (useful when scaled down by factor of 2 in CSS for mobile/retina/nonretina optimization). Note that padding must be set to (multiple of) 2 as well.
options.svg
Type: Boolean
Default: false
Version: 0.1.7
When set to true
, the packer will work in experimental SVG mode. In this mode, all of the input sprites have to be valid SVG files. These SVGs will be merged into a single SVG sprite file by some XML processing. Individual sprites will be included as SVG elements (SVG root element can contain another SVG elements) and positioned using the same packer algorithm as in normal "bitmap" mode. Note that each SVG sprite should have correctly set width
and height
attributes that define its bounding box. The viewBox
attribute is ignored. To prevent problems with duplicate ID attributes from different files, any IDs are prefixed with the name of the sprite. All xlink:href
and url(#)
references are modified accordingly.
Credits
This plugin uses binary tree packer algorithm by Jake Gordon (https://github.com/jakesgordon/bin-packing/).