Grunt-node-sprite-mixings NPM

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.

urlNamespace

urlNamespace: String - By default is disabled, add a path on the URL of the background image.

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']
    },
    options: {
        removeJson: true, // default is false
        urlNamespace: '/images/' // default is disabled
    }
  },
});

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']
        },
        options: {
            removeJson: true, // default is false
            urlNamespace: '/images/' // default is disabled
        }
    },
  },
});

Structural mixing expected / STYL

This is the format that is generated by mixing task:

  foo(x-offset=0, y-offset=0, repeat=no-repeat)
    background url('urlNamespace/example-1.png') repeat (0px + x-offset) (442px + y-offset) transparent
    width 20px
    height 20px

Stylus implementation

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

@import 'mixings/example'

.example_1
  foo()

.example_2
  foo(true, 2px, 2px)

.example_3
  foo(true, 0, 0, repeat-x)

.example_4
  foo(false)

Result of css:

.example_1 {
  background:url("urlNamespace/example-1.png") no-repeat 0 211px transparent;
  width: 20px;
  height: 20px
}

.example_2 {
  background:url("urlNamespace/example-1.png") no-repeat 2px 213px transparent;
  width: 20px;
  height: 20px
}

.example_3 {
  background:url("urlNamespace/example-1.png") repeat-x 0 211px transparent;
  width: 20px;
  height: 20px
}

.example_4 {
  background:url("urlNamespace/example-1.png") repeat-x 0 211px 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",
        "width": 20px,
        "height": 20px,
        "positionX": 0,
        "positionY": 0
    }, {
        "name": "bar",
        "width": 30px,
        "height": 30px,
        "positionX": 0,
        "positionY": 442
    }]
}