gulp plugin for sprite generation
Switch branches/tags
Nothing to show
Clone or download
Latest commit ed608fc Mar 27, 2014
Permalink
Failed to load latest commit information.
lib output files, dont save them Feb 16, 2014
.editorconfig first commit Feb 10, 2014
.gitattributes first commit Feb 10, 2014
.gitignore first commit Feb 10, 2014
.jshintrc first commit Feb 10, 2014
LICENSE first commit Feb 10, 2014
README.md Update README.md Mar 27, 2014
index.js rename style params Feb 17, 2014
package.json output files, dont save them Feb 16, 2014

README.md

gulp-spritesmith

NPM version Dependency Status

Gulp plugin for sprite generation, based on spritesmith.

Usage

First, install gulp-spritesmith as a development dependency:

npm i -D gulp-spritesmith

Then, add it to your gulpfile.js:

var spritesmith = require("gulp-spritesmith");
var gulpif = require("gulp-if");

gulp.task('sprites', function () {
    return  gulp.src('./src/**/png/*.png')
                .pipe(tasks.spritesmith({
                    imgName: 'sprite.png',
                    styleName: 'sprite.css',
                    imgPath: '../img/sprite.png'
                }))
                .pipe(gulpif('*.png', gulp.dest('./dist/img/')))
                .pipe(gulpif('*.css', gulp.dest('./dist/css/')));
});

If you need few grouped sprites, you should specify folder name to group by. Lets say you have following app structure, with several skins:

  • /Module1
    • ...
    • /skin
      • /basic
        • /png
      • /green
        • /png
      • /dark
        • /png
      • /light
        • /png
  • ...
  • /ModuleN
    • ...
    • /skin
      • /basic
        • /png
      • /green
      • /dark
        • /png
      • /light

Then just set skin for groupBy param:

gulp.task('sprites', function () {
    return  gulp.src('./src/**/png/*.png')
                .pipe(tasks.spritesmith({
                    imgName: 'sprite.png',
                    styleName: 'sprite.css',
                    imgPath: '../img/sprite.png',
                    groupBy: 'skin'
                }))
                .pipe(gulpif('*.png', gulp.dest('./dist/img/')))
                .pipe(gulpif('*.css', gulp.dest('./dist/css/')));
});

and you`ll get 4 sprites: sprite.basic.png, sprite.green.png, sprite.dark.png, sprite.light.png. And the same for css.

API

spritesmith(options)

options.imgName

Type: String Default: ``

Set name for sprite img file.

options.styleName

Type: String Default: ``

Set name for sprite styles file.

options.imgPath

Type: String Default: ``

Set relative path to sprite img, which will be used in styles file.

options.styleTemplate

Type: String Default: ``

Path to mustache tmpl file, to format output styles file.

Set relative path to sprite img, which will be used in styles file.

options.groupBy

Type: String Default: ``

Set if you want to get grouped sprites.

options.algorithm

Type: String Default: binary-tree

Set packing algorithm, top-down/left-right/diagonal/alt-diagonal/binary-tree are available.

options.padding

Type: Number Default: 1

Set padding in pixels to use between images

Changelog

0.0.2 - Dont save sprite files inside task anymore.

0.0.1 - initial version

License

MIT License