Grunt-css-sprite tile merging in CSS code

Install plugin: npm install grunt-css-sprite--save-dev

Grunt-css-sprite main functions:
1. Process the CSS file, collect the slice sequence, generate sprite map
2. Add the Background-position property to the slice in the original CSS code
3. Generate HD Sprite for HD device and append media query code at the end of CSS file
4. Generate the HD Device sprite chart, using Image-set
5. Support selector extraction to further optimize CSS file size
6. Place a timestamp on the location where the sprite map is referenced
7. Append a timestamp at the end of the style
8. Name the file by time stamp

Configuration Description:

ImagePath
Required, Sprite background source folder, only match this path will be processed, default is images/slice/

Imagepath_map
Map the background path in CSS, support functions and arrays, default to NULL

Spritedest
Required, Sprite output directory, note that will overwrite the previous file! Default images/

Spritepath
Optional, replace the background path, default to Path.relative (Cssdestpath, Spritedestpath);

Padding
Optional, specify the spacing between each picture, if set to odd, will force +1 to ensure that the resulting 2x picture is even width
High, default 0

Useimageset
Optional, whether to use Image-set as a 2x image implementation, default does not use

Newsprite
Optional, whether to generate a new sprite file with a timestamp for the file name, if enabled please note that the files generated before the cleanup, the default does not generate new files

Spritestamp
Optional, whether to append a timestamp to Sprite, not append by default

Cssstamp
Optional, whether to append a timestamp at the end of the CSS file, not append by default

Engine
Optional, specify image processing engine, default selection Pngsmith

Algorithm
Optional, specified arrangement, with Top-down (top to bottom), left-right (from left to right), diagonal (from top left to right), alt-diagonal (bottom left to right) and binary-tree (binary tree optimal permutation algorithm) five options, Default Binary-tree

Examples of auto Sprite graphs:

Sprite: {options: {//Sprite Background Map source folder, only matching this path will be processed, default images/slice/ImagePath'img1/',    //map the background path in CSS, support functions and arrays, default to NULLImagepath_map:NULL,    //Sprite Graph Output Directory, note that will overwrite the previous file! Default Images/Spritedest:'img1/',    //Replace the background path, default: /images/Spritepath:'.. /img1/',    //The spacing between the pictures, if set to odd, will force +1 to ensure that the resulting 2x image is even-width-high,default0padding:Ten,    //whether to use Image-set as a 2x picture implementation, default does not useUseimageset:false,    //whether to generate a new sprite file with a timestamp for the file name, if enabled, note that the previous generatedfile, the default is not to generate a new file Newsprite:false,    //append timestamp to Sprite, default not appendSpritestamp:true,    //appends a timestamp to the end of the CSS file, without appending the defaultCssstamp:true,    //default two-fork tree optimal permutation algorithmAlgorithm:'Binary-tree',    //use the ' pixelsmith ' image processing engine by defaultEngine'Pixelsmith'}, Autosprite: {files: {//Enable dynamic expansionExpandtrue,      //folder for CSS file sourcesCwd'css/',      //Matching RulesSrc:'*.css',      //export path addresses for CSS and spritesDest'stylesheets/',      //the exported CSS nameExt'. Sprite.css'    }  }}

Special attention
1. The generated sprite will be named after the source CSS file name
2. Only when the path matching parameter of the URL (xxxx) defined in the CSS is imagepath to be processed, and the specific background,background-imagecss is irrelevant, there is a difference from grunt-sprite
3. Theoretically the HD slice should be twice times the size of the source tile, so all HD tiles must be of even size and height
4. Theoretically all slices should be. png format, Png8 Png24 and Png32 Unlimited
5.spritesmith only PNG format is supported by default

Refer to Https://www.npmjs.com/package/grunt-css-sprite
Grunt-sprite:https://www.npmjs.com/package/grunt-sprite

Grunt-css-sprite tile merging in CSS code