gulp-spritesmith
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 = ;var gulpif = ; gulp;
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
- /basic
- ...
- /ModuleN
- ...
- /skin
- /basic
- /png
- /green
- /dark
- /png
- /light
- /basic
Then just set skin
for groupBy param:
gulp;
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