gulp.spritesmith-multi
A wrapper for gulp.spritesmith to generate multiple sprites and stylesheets.
Example
var gulp = var spritesmith = gulp gulp
input:
⌘ tree sp
sp
├── hover
│ ├── sprite1--hover.png
│ ├── sprite1--hover@2x.png
│ ├── sprite1.png
│ ├── sprite1@2x.png
│ ├── sprite2.png
│ ├── sprite2@2x.png
│ ├── sprite3.png
│ └── sprite3@2x.png
├── normal
│ ├── sprite1.png
│ ├── sprite2.png
│ └── sprite3.png
└── retina
├── sprite1.png
├── sprite1@2x.png
├── sprite2.png
├── sprite2@2x.png
├── sprite3.png
└── sprite3@2x.png
output:
⌘ tree build/
build/
├── hover.css
├── hover.png
├── hover@2x.png
├── normal.css
├── normal.png
├── retina.css
├── retina.png
└── retina@2x.png
hover.css
{}
Continuing the pipeline
You can continue the pipeline the way the original gulp.spritesmith
support.
gulp
Options
to(iconFile)
Specify the name of the sprite into which the given icon should be included
Type: Function
, String
If String
, you just get one sprite.
By default, icons are grouped by their directory names.
spritesmith
Specify options for each sprite.
Type: Object
, Function
The following fields are set by default:
var options = imgName: sprite + '.png' cssName: sprite + '.css' cssTemplate: builtincss cssSpritesheetName: 'sp-' + sprite
You can override them through this option.
If Function
,
it receives the default options,
the sprite name specified by options.to
and the related icon files (vinyl file objects).
Modify the options object passed in, or return a new one.
Custom templates
The default css template is exports.builtin.css
.
To specify custom templates,
create a templater through exports.util.createTemplate
,
and set options.spritesmith.cssTemplate
to it.
var gulp = var path = var spritesmith = var util = spritesmithutil gulp
Input:
The custom template
.{{{theme}}} .sp-hover { background-image: url({{{spritesheet.escaped_image}}});} {{#if retina_spritesheet}}@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .{{{theme}}} .sp-hover { background-image: url({{{retina_spritesheet.escaped_image}}}); background-size: {{spritesheet.px.width}} {{spritesheet.px.height}}; }}{{/if}} {{#each sprites}}.sp-hover__{{{name}}}{{pseudo_class}} { background-position: {{px.offset_x}} {{px.offset_y}}; width: {{px.width}}; height: {{px.height}};}{{/each}}
Icons
⌘ tree sp/hover*
sp/hover
├── sprite1--hover.png
├── sprite1--hover@2x.png
├── sprite1.png
├── sprite1@2x.png
├── sprite2.png
├── sprite2@2x.png
├── sprite3.png
└── sprite3@2x.png
sp/hover--theme
├── sprite1--hover.png
├── sprite1--hover@2x.png
├── sprite1.png
├── sprite1@2x.png
├── sprite2.png
├── sprite2@2x.png
├── sprite3.png
└── sprite3@2x.png
Output:
⌘ tree build/
build/
├── hover--theme.css
├── hover--theme.png
├── hover--theme@2x.png
├── hover.css
├── hover.png
├── hover@2x.png
├── normal.css
├── normal.png
├── retina.css
├── retina.png
└── retina@2x.png
hover--theme.css
{}
Retina support
All retina icon files should be named like xxx@2x.png
.
Responsive CSS support
Responsive CSS sprites are able to be resized in relative length units such as rem
which is practical in creating perfectly scalable layout.
You can use a builtin template exports.builtin.responsiveCss
to generate responsive CSS sprites.
var gulp = var spritesmith = gulp
input:
⌘ tree responsive-css
responsive-css
├── hover
│ ├── sprite1--hover.png
│ ├── sprite1--hover@2x.png
│ ├── sprite1.png
│ ├── sprite1@2x.png
│ ├── sprite2.png
│ ├── sprite2@2x.png
│ ├── sprite3.png
│ └── sprite3@2x.png
├── normal
│ ├── sprite1.png
│ ├── sprite2.png
│ └── sprite3.png
└── retina
├── sprite1.png
├── sprite1@2x.png
├── sprite2.png
├── sprite2@2x.png
├── sprite3.png
└── sprite3@2x.png
output:
⌘ tree build/
build
├── hover.css
├── hover.png
├── hover@2x.png
├── normal.css
├── normal.png
├── retina.css
├── retina.png
└── retina@2x.png
hover.css
{}
Though there are default width
and height
in the CSS rules,
you can override them and the background image will be resized automatically.
Utils
exports.util
Type: Object
Methods to work with.
createTemplate(tplInfo, filter)
Create a templater.
tplInfo
Specify template.
Type: Object
tplInfo.file
: the file path of the handlebars templatetplInfo.source
: the contents of the template
Either one of them should be specified.
If tplInfo
is String
, it is treated as a file path.
filter
Specify data for the template.
If Array
, you are specifying an array of filters.
If Object
, it will be mixed into the default data.
If Function
, you can modify the default data object,
or just return a new one.
addPseudoClass
A template data filter to support generating pseudo classes.
If the icon file is something like name--pseduoClass.png
,
.sp-sprite__name:pseduoClass
is created in the css,
rather than .sp-sprite__name--pseduoClass
.
NOTE: for retina icons,
you should name them like name--pseduoClass@2x.png
.
exports.builtin
Type: Object
Templates provided by default.
Pick one of them, and set options.spritesmith.cssTemplate
to apply it.