Have ideas to improve npm?Join in the discussion! »

    gulp-spritesmith

    0.0.2 • Public • Published

    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.algorithm

    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

    Keywords

    none

    Install

    npm i gulp-spritesmith

    DownloadsWeekly Downloads

    158

    Version

    0.0.2

    License

    none

    Last publish

    Collaborators

    • avatar