gulp-sprite-glue v0.1.1
gulp-sprite-glue
gulp-sprite-glue plugin for gulp
Required
This plugin requires
Usage
First, install gulp-sprite-glue as a development dependency:
npm install --save-dev gulp-sprite-glueThen, add it to your gulpfile.js:
var glue = require("gulp-sprite-glue");
gulp.src("./src/*")
.pipe(glue("/path/to/sprites",{
// options
}));
//glue("dest path",options);or
var glue = require("gulp-sprite-glue");
gulp.src("./src/*")
.pipe(glue({
css: '/path/to/css_dest',
img: '/path/to/img_dest'
}));
//glue(options);
//Both css and img options required.API
gulp-sprite-glue(options)
options.crop
Type: Boolean
Default value: false
Optimize our sprite by croping all the unnecessary transparent spaces that the original images could have.
options.caat
Type: Boolean
Default value: false
Generate both a sprite image and a caat metadata file.
options.cachebuster
Type: Boolean
Default value: false
Automatically add the hash of the PNG file to the CSS url
options.cachebusterFilename
Type: String
Default value: null
Insted of using the hash of the PNG as a queryarg it uses it as part of the filename.
options.cachebusterFilenameOnlySprites
Type: Boolean
Default value: false
Only apply filename cachebusting to the sprite image and not to both the CSS and the sprite image.
options.cocos2d
Type: Boolean
Default value: false
Generate both a sprite image and a xml metadata file compatible with cocos2d.
options.css
Type: String
Default value: null
Choose an individual folder for css you.
options.img
Type: String
Default value: null
Choose an individual folder for image.
options.cssTemplate
Type: String
Default value: null
You can use your own css template
options.force
Type: Boolean
Default value: false
In order to avoid this behaviour you can use force and glue will always build the sprites.
options.followLinks
Type: Boolean
Default value: false
Follow symbolic links.
options.html
Type: Boolean
Default value: false
Generate a test html per sprite using all the available CSS classes. This option is only useful for testing purposes.
options.json
Type: Boolean
Default value: false
Generate both a sprite image and a json metadata file.
options.jsonFormat
Type: String
Default value: null
You can customize how the generated JSON will look. You can choose between array and hash.
options.less
Type: Boolean
Default value: false
Glue can also create .less files
options.lessTemplate
Type: String
Default value: null
You can use your own less template
options.margin
Type: Number
Default value: null
If you want to spread the images around the sprite but you don’t want to count this space as image width/height.
options.namespace
Type: String
Default value: null
your own namespace you can override the default one.
options.noImg
Type: Boolean
Default value: false
Don’t create any sprite image.
options.noCss
Type: Boolean
Default value: false
Don’t create any CSS file.
options.ordering
Type: String
Default value: null
Before processing the images using the algorithm glue orders the images.
- maxside
- width
- height
- area
- filename
options.padding
Type: Number
Default value: null
If you want to add the same padding around all images.
options.png8
Type: Boolean
Default value: false
By using the flag png8 the output image format will be png8 instead of png32.
options.project
Type: Boolean
Default value: false
Generate several sprites for a project.
options.pseudoClassSeparator
Type: String
Default value: null
using the filename of the source images you can customize the pseudo class related to the images.
options.quiet
Type: Boolean
Default value: false
This flag will make glue suppress all console output.
options.recursive
Type: Boolean
Default value: false
Read directories recursively and add all the images to the same sprite.
options.ratios
Type: String
Default value: null
Automatically scale down your sprites to automatically fit them into low-dpi devices.
options.retina
Type: Boolean
Default value: false
The option retina is only a shortcut for ratios=2,1.
options.source
Type: String
Default value: null
Source directory.
options.output
Type: String
Default value: null
Output directory.
options.scss
Type: Boolean
Default value: false
Glue can also create .scss files.
options.scssTemplate
Type: String
Default value: null
You can use your own scss template
options.separator
Type: String
Default value: null
Separator for the CSS class names.
options.spriteNamespace
Type: String
Default value: null
Sprite’s name as past of the CSS class namespace.
options.url
Type: String
Default value: null
PNG file name the relative url between the CSS and the PNG file.
options.watch
Type: Boolean
Default value: false
While you are developing a site it could be quite frustrating running Glue.
Test
npm testLicense
MIT
Copyright (c) 2014 frontainer
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.