Sprite generator with Glue & Grunt.
This plugin requires
If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins.
Once you're familiar with that process, you may install this plugin with this command:
grunt.loadNpmTasks('grunt-sprite-glue');
In your project's Gruntfile, add a section named spglue
to the data object passed into grunt.initConfig()
.
grunt.initConfig({
spglue: {
options: {
// Task-specific options go here.
},
your_target: {
files: {
'/path/to/': '/path/images/'
}
// Target-specific file lists and/or options go here.
},
},
});
Type: String
Default value: null
The criteria that glue uses to order the images before adding them to the canvas can be tunned.
- square
- vertical
- vertical-right
- horizontal
- horizontal-bottom
- dianomal
Type: Boolean
Default value: false
Optimize our sprite by croping all the unnecessary transparent spaces that the original images could have.
Type: Boolean
Default value: false
Generate both a sprite image and a caat metadata file.
Type: Boolean
Default value: false
Automatically add the hash of the PNG file to the CSS url
Type: String
Default value: null
Insted of using the hash of the PNG as a queryarg it uses it as part of the filename.
Type: Boolean
Default value: false
Only apply filename cachebusting to the sprite image and not to both the CSS and the sprite image.
Type: Boolean
Default value: false
Generate both a sprite image and a xml metadata file compatible with cocos2d.
Type: String
Default value: null
Choose an individual folder for css you.
Type: String
Default value: null
Choose an individual folder for image.
Type: String
Default value: null
You can use your own css template
Type: Boolean
Default value: false
In order to avoid this behaviour you can use force and glue will always build the sprites.
Type: Boolean
Default value: false
Follow symbolic links.
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.
Type: Boolean
Default value: false
Generate both a sprite image and a json metadata file.
Type: String
Default value: null
You can customize how the generated JSON will look. You can choose between array and hash.
Type: Boolean
Default value: false
Glue can also create .less files
Type: String
Default value: null
You can use your own less template
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.
Type: String
Default value: null
your own namespace you can override the default one.
Type: Boolean
Default value: false
Don’t create any sprite image.
Type: Boolean
Default value: false
Don’t create any CSS file.
Type: String
Default value: null
Before processing the images using the algorithm glue orders the images.
- maxside
- width
- height
- area
- filename
Type: Number
Default value: null
If you want to add the same padding around all images.
Type: Boolean
Default value: false
By using the flag png8 the output image format will be png8 instead of png32.
Type: Boolean
Default value: false
Generate several sprites for a project.
Type: String
Default value: null
using the filename of the source images you can customize the pseudo class related to the images.
Type: Boolean
Default value: false
This flag will make glue suppress all console output.
Type: Boolean
Default value: false
Read directories recursively and add all the images to the same sprite.
Type: String
Default value: null
Automatically scale down your sprites to automatically fit them into low-dpi devices.
Type: Boolean
Default value: false
The option retina is only a shortcut for ratios=2,1.
Type: String
Default value: null
Source directory.
Type: String
Default value: null
Output directory.
Type: Boolean
Default value: false
Glue can also create .scss files.
Type: String
Default value: null
You can use your own scss template
Type: String
Default value: null
Separator for the CSS class names.
Type: String
Default value: null
Sprite’s name as past of the CSS class namespace.
Type: String
Default value: null
PNG file name the relative url between the CSS and the PNG file.
Type: Boolean
Default value: false
While you are developing a site it could be quite frustrating running Glue.
spglue: {
options: {
},
dev: {
options: {
project: true,
scss: true
},
files: {
'css/sass': 'images/sprites'
}
}
}
(Nothing yet)