Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    grunt-tamia-spritepublic

    Sprite generator for Tâmia

    Build Status

    Generates spritesheet from PNG files and a list of Stylus variables with coordinates to use in Tâmia. Uses spritesmith. Inspired by grunt-spritesmith.

    Installation

    This plugin requires Grunt 0.4.

    npm install --save-dev grunt-tamia-sprite

    Add to your Gruntfile.js:

    grunt.loadNpmTasks('grunt-tamia-sprite');

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

    Parameters

    src

    Type: String|Array.

    Images list (PNG only). String or array. Wildcards are supported.

    dest

    Type: String.

    Resulting sprite image location.

    Options

    Options should be inside options object:

    sprite: {
        all: {
            src: 'images/sprites/*.png',
            dest: 'build/sprite.png'
            options: {
                destStyl: 'styles/sprite.styl'
            }
        }
    }
    

    destStyl

    Type: String, default: same as dest but with .styl extension.

    Resulting Stylus file location. Use false to disable Stylus file generation.

    destJson

    Type: String, default: same as dest but with .json extension.

    Resulting JSON file location. Use false to disable JSON file generation.

    template

    Type: String, default: '{%=target%}_{%=name%} = {%=x%}px {%=y%}px {%=width%}px {%=height%}px'.

    Template for generating every string in a Stylus file.

    fingerprintTemplate

    Type: String, default: '{%=target%}_fingerprint = "{%=fingerprint%}"'.

    Template for variable with fingerpting (date of last sprite modification).

    sprite_image = sprite_image + '?' + sprite_fingerprint;
    

    propertyTemplate

    Type: String, default: '{%=target%}_{%=name%} = {%=value%}px'.

    Template for spritesheet properties variables (width & height).

    background-size: sprite_width sprite_height;
    

    algorithm

    Type: String, default: 'binary-tree'

    Layout algorithm (top-down, left-right, diagonal, alt-diagonal, binary-tree).

    padding

    Type: String, default: 3.

    Padding between images.

    engine

    Type: String, default: 'auto'

    Generation engine (auto, gm, canvas).

    Gruntfile Example

    module.exports = function(grunt) {
        grunt.initConfig({
            sprite: {
                all: {
                    src: 'images/sprites/*.png',
                    dest: 'build/sprite.png'
                }
            }
        });
        grunt.loadNpmTasks('grunt-tamia-sprite');
        grunt.registerTask('default', ['sprite']);
    };

    Stylus Example (with nib & vars from JSON file)

    sprite = json("sprite.json", { hash: true })
    .sprite
        image("sprite.png", sprite.properties.width * 1px, sprite.properties.height * 1px)
     
        for name, data in sprite.coordinates
            &_{name}
                add-property("background-position", data.x * 1px data.y * 1px)
                add-property("width", data.width * 1px)
                add-property("height", data.height * 1px)

    Changelog

    The changelog can be found in the Changelog.md file.


    License

    The MIT License, see the included License.md file.

    install

    npm i grunt-tamia-sprite

    Downloadsweekly downloads

    45

    version

    0.3.1

    license

    none

    repository

    githubgithub

    last publish

    collaborators

    • avatar