Grunt library for using spritesmith with simple-sprite-animation, forked from Todd Wolfson's grunt-spritesmith
Grunt library for using spritesmith, a spritesheet and CSS pre-processor utility.
Spritesmith accepts a list of images, stiches them together, and returns that image along with a coordinate map of where each image is located and its dimensions.
Grunt is a node.js based CLI build tool.
When you combine all three of these, you get a grunt plugin that makes maintaining sprites a breeze.
Install this grunt plugin next to your project's grunt.js gruntfile with:
npm install grunt-spritesmith
Then add this line to your project's
gruntinitConfig'sprite':'all':// Sprite files to read in'src': 'public/images/sprites/*.png'// Location to output spritesheet'destImg': 'public/images/sprite.png'// Stylus with variables under sprite names'destCSS': 'public/css/sprite_positions.styl'// OPTIONAL: Manual override for imgPath specified in CSS'imgPath': '../sprite.png'// OPTIONAL: Specify algorithm (top-down, left-right, diagonal, alt-diagonal)'algorithm': 'alt-diagonal'// OPTIONAL: Specify engine (auto, canvas, gm)'engine': 'canvas'// OPTIONAL: Specify CSS format (inferred from destCSS' extension by default) (stylus, scss, sass, less, json)'cssFormat': 'json'// OPTIONAL: Specify img options'imgOpts':// Format of the image (inferred from destImg' extension by default) (jpg, png)'format': 'png'// Quality of image (gm only)'quality': 90;
In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint via grunt and test via
Algorithms are maintained via twolfson/layout. If you would like to add one, please submit it via a pull request.
Engines and image options are maintained via Ensighten/spritesmith. If you would like to add one, please submit it via a pull request.
CSS formats are maintained via twolfson/json2css. If you would like to add one, please submit it via a pull request.
Copyright (c) 2012 Ensighten Licensed under the MIT license.