Generate sprites separated by folders, with grunt-spritesmith. Main idea is generate files in separate folders. It's a wrapper for grunt-spritesmith.
This plugin requires Grunt ~0.4.5
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:
npm install grunt-sprites --save-devOnce the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:
grunt.loadNpmTasks('grunt-sprites');In your project's Gruntfile, add a section named sprites to the data object passed into grunt.initConfig().
grunt.initConfig({
sprites: {
options: {
baseDir : 'path/to/dir/with/subdirs',
imgType : ['png, jpeg'],
//Support all grunt-spritesmith options
initSpritesmithConfig : function(folderName) {
return {
//src : '', NO NEED
engine : 'pngsmith',
cssTemplate: 'app/css/less.template.mustache',
destImg : 'app/images/sprites/' + folderName + '.png',
destCSS : 'app/css/less/' + folderName + '.less',
cssFormat : 'less'
};
}
}
},
});Type: String
Default value: undefined
Folder which contain subfolders with sprites images SPRITES_FOLDER > sub-sprite1 > image1 image2 sub-sprite2 > image1 image2 sub-sprite3 > image1 image2
Type: String
Default value: [png]
Images type (supports all type as grunt-spritesmith support)
Type: Function
Default value: undefined
Returns value: Object
Spritesmith dynamic configuration; Returns object with grunt-spritesmith configuration. Param SRC NO NEEDED, and all other options are supports.
grunt.initConfig({
sprites : {
options : {
baseDir : '<%= loc.img_sprite %>',
imgType : ['png', 'jpeg']
initSpritesmithConfig : function(folderName) {
return {
//src : '', NO NEED
engine : 'pngsmith',
cssTemplate: 'app/css/less.template.mustache',
destImg : 'app/images/sprites/' + folderName + '.png',
destCSS : 'app/css/less/' + folderName + '.less',
cssFormat : 'less'
};
}
}
}
});
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent