gulp-spritegen
v0.9.8
Published
generates sprites for different densities (iPhone 6+)
Downloads
6
Readme
gulp-spritegen
Requirements
Options
{Number|Array<Number>} ratio
List of required ratios. Each output sprite identified by ratio(e.g.[email protected]
for ratio:2
){String} spriteImg
Name of output image.{String} spriteMeta
Name of file contains stylesheets for sprites.{Integer} gutter
Size of frame around each of inputs image in final sprite.{String} algorithm
Algorithm for laying inputs images in final sprite.{String|Function} engine
Engine which used for create stylesheets for sprites.
Engines
Plugin have following default engines:
css
(Using CSS as stylesheet for sprites)less
(Using LESS as stylesheet for sprites)scss
(Using SCSS as stylesheet for sprites)
Restrictions
- All files which you piped to this plugin should be an image and have PNG format.
- All files which you piped to this plugin should have one of the following formats:
myImage-30x35.png
(where:30
- width,35
- height)myImage-30.png
(where:30
- width, height calculates automatically)myImage-x35.png
(where:35
- height, width calculates automatically)
Size which you define in filename means size of that image for ratio equals to one. Best practice is creating image with big size(e.g. 1024x1024) with name containing small size(e.g. 128x128).
Examples
Simple usage:
gulp.src('./images/icons/*.png')
.pipe(spritegen({
ratio: [1, 2],
spriteImg: 'icons',
spriteMeta: 'incons'
engine: 'css'
}))
.pipe(gulp.dest('./dest'));
As a result you can see in ./dest
directory following files: [email protected]
, [email protected]
, icons.css
License
MIT