Usage

File placements (Example)

Settings

Example (coffee-style)

grunt.loadNpmTasks 'grunt-stylsprite'

Stylsprite-Task Options

Example (coffee-style)

simple:
    options:
        cwd:'src/images' # it is required in "simple" mode.
        dest:'dest/img' # it is required in "simple" mode.
    files:[
        'dest/img/bl.png':'src/images/b/l'
        'dest/img/tl.png':'src/images/t/l'
        'dest/img/br.png':'src/images/b/r'
        'dest/img/tr.png':'src/images/t/r'
    ]

allinone:
    options:
        dest:'dest/img' # it is required in "all-in-one" mode.
    files:[
        expand:false # it is required in "all-in-one" mode.
        cwd:'src/images'
        src:['**']
        dest:'dest/img/allinone.png'
    ]

multiple:
    files:[
        expand:true # it is required in "multiple" mode.
        cwd:'src/images'
        src:['**']
        dest:'dest/img'
    ]

Options

cwd

Type: string
Require: simple-mode

Path to the image-sources.

dest

Type: string
Require: simple-mode and allinone-mode

Path to the images-destination.

padding (option)

Type: int
Default: 2

Interval of the image and image.

Grunt task - Simple Mode

simple:
    options:
        cwd:'src/images' # it is required in "simple" mode.
        dest:'dest/img' # it is required in "simple" mode.
    files:[
        'dest/img/tl.png':'src/images/t/l'
        'dest/img/tr.png':'src/images/t/r'
        'dest/img/bl.png':'src/images/b/l'
        'dest/img/br.png':'src/images/b/r'
    ]

Yield

Generate dest/img/tl.png and dest/img/tr.png and dest/img/bl.png and dest/img/br.png

Grunt task - Multiple Mode

stylsprite:
    multiple:
        files:[
            expand:true # it is required in "multiple" mode.
            cwd:'src/images'
            src:['**']
            dest:'dest/img'
        ]

Yield

Generate dest/img/t/l.png and dest/img/t/r.png and dest/img/b/l.png and dest/img/b/r.png

Grunt task - All In One Mode

allinone:
    options:
        dest:'dest/img' # it is required in "all-in-one" mode.
    files:[
        expand:false # it is required in "all-in-one" mode.
        cwd:'src/images'
        src:['**']
        dest:'dest/img/allinone.png'
    ]

Yield

Generate dest/img/allinone.png

Stylsprite-Plugin Arguments

Settings

load stylus plugin

stylspritePlugin = require 'grunt-stylsprite'

and stylus-task settings.

stylus:
    options:
        use:[stylspritePlugin("dest/css","dest"[,options])]
    index:
        files:
            'dest/css/example.css':'src/css/example.styl'

First argument

Type: string

Path to the css directory.

Second argument

Type: string

Path to the document root directory.

options.pixelRatio (option)

Type: int Default: 1

default pixelRatio.
if you want set to retina for all-sprites, set value of 2.

Usage in src/css/example.styl

Task settings

stylus:
    options:
        use:[stylspritePlugin("dest/css","dest")]
    index:
        files:[
            'dest/css/example.css':'src/css/example.styl'
        ]

and use stylsprite function in example.styl

or

and Retina support

For more information, please see below.

node_modules/grunt-stylsprite/gruntfile.coffee