grunt-node-sprite-mixings

grunt-node-sprite-mixings

Mixing generator for stylus, from a json that contains the coordinates of the images on the sprite.

Requirements

This plugin requires Grunt ~0.4.2 and node-sprite ~0.1.2

Getting Started

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-node-sprite-mixings --save-dev

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

grunt.loadNpmTasks('grunt-node-sprite-mixings');

The "node_sprite_mixings" task

Overview

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

grunt.initConfig({
  node_sprite_mixings: {
    files: {
      // task specifics
    }
  },
});

Before run the grunt-node-sprite-mixings task you must make sure that the sprite and json has been generated.

Options

This task has just one option.

jsonRemove

jsonRemove: Boolean - By default is false, should you wish to delete the jsons after generation of the mixings.

Usage Examples

One file per sprites

Coming together of all json sprites into a single mixing.

grunt.initConfig({
  node_sprite_mixings: {
    files: {
        dest: 'public/stylesheets/mixings/example.styl',
        src: ['public/images/*.json']
    }
  },
});

Multiple files per sprites

Mixings separated for every sprite.

grunt.initConfig({
  node_sprite_mixings: {
    basicAndExtras: {
        files: {
            'public/stylesheets/mixings/bar.styl': ['public/images/bar.json'],
            'public/stylesheets/mixings/foo.styl': ['public/images/foo.json']
        }
    },
  },
});

Structural mixing expected / STYL

This is the format that is generated by mixing task:

  foo(repeat='no-repeat', x-offset=0, y-offset=0)
    background url('example-1.png') repeat (0 + x-offset) (442 + y-offset) transparent

Stylus implementation

To use the mixings generated, just call into your file.styl as follows:

@import 'mixings/example'

.example
  foo()

Result of css:

.example {
  background:url("example-1.png") 'no-repeat' 0 211 transparent;
}

Structural Sprite Information required / JSON

The json that was specified in jsonFile, should be in this structure.

To learn how to produce this automatic json lib check out the node-sprite, and see how to utilize.

{
    "name": "example",
    "shortsum": "1",
    "images": [{
        "name": "foo",
        "positionX": 0,
        "positionY": 0
    }, {
        "name": "bar",
        "positionX": 0,
        "positionY": 442
    }]
}

Contributing

Feel free to post issues or pull request.

You can run the projects tests with the npm test command.

Release History

• 2013-03-05 v0.1.3 Improvements remove json and code refactors
• 2013-03-05 v0.1.2 First released

Task submitted by Saulo S. Santiago