Gulp Multi-image Auto-synthesis Sprite chart

Believe that the front-end students have done such a thing, in order to optimize the picture, reduce the request will be taken to cut the image of the icon, through PS (or other tools) to merge the pictures into a picture, and then through the CSS positioning of the style to write out to reference the HTML inside. For some projects with more pictures, this process may take us a day to achieve this. Today I bring you a tool to shorten this step to a few seconds to complete, what is the tool so amazing, he is gulp a plug-in gulp.spritesmith. The following picture shows what he can do.

See this picture introduction, I believe you have to Gulp.spritesmith can do what at a glance, the other not much said, the following said directly to achieve

Pre-preparation

Installing Gulp (Introduction to use)

Background command to install the Gulp plugin:

NPM Install--save-dev gulp.spritesmith installation Gulp.spritesmith

Gulpfile.js File Contents

/Introduction of GulpvarGulp=require ("Gulp"), Spritesmith=require ('Gulp.spritesmith'); Gulp.task ('default', function () {returnGULP.SRC ('Images/*.png')//picture addresses that need to be merged. Pipe (Spritesmith ({imgname:'Sprite.png',//Save the address of the merged pictureCssname:'Css/sprite.css',//Save the address of a CSS style after mergingPadding5,//the spacing between two pictures when mergingAlgorithm:'Binary-tree',//Note 1Csstemplate:"Css/handlebarsstr.css"//NOTE 2}). Pipe (Gulp.dest ('dist/'));});

Note one:

Algorithm has four selectable values of Top-down, left-right, Diagonal, alt-diagonal, Binary-tree, respectively

For the following:

Note two:

Csstemplate is a template file that generates CSS, which can be a string or a function. Is the string that is for the template address relative to the template file style format is:

{{#sprites}}.icon-{{name}}{    background-image:url ("{{escaped_image}} " );    Background-position: {{px.offset_x}} {{px.offset_y}};    Width: {{px.width}};    Height: {{px.height}};} {{/sprites}}

If it's a function, it can be written like this.

//Introduction of GulpvarGulp=require ("Gulp"), Spritesmith=require ('Gulp.spritesmith'); Gulp.task ('default', function () {returnGULP.SRC ('Images/*.png')//picture addresses that need to be merged. Pipe (Spritesmith ({imgname:'Sprite.png',//Save the address of the merged pictureCssname:'Css/sprite.css',//Save the address of a CSS style after mergingPadding5,//the spacing between two pictures when mergingAlgorithm:'Binary-tree',//Note 1csstemplate:function (data) {varArr=[]; Data.sprites.forEach (function (sprite) {Arr.push (". icon-"+sprite.name+"{"+"Background-image:url ('"+sprite.escaped_image+"');"+"background-position:"+sprite.px.offset_x+"px"+sprite.px.offset_y+"px;"+"Width:"+sprite.px.width+";"+"Height:"+sprite.px.height+";"+"}\n");                }); returnArr.join (""); }). Pipe (Gulp.dest ('dist/'));});

The above is the implementation of CSS code in the tile image into the sprite diagram implementation, there is a problem everyone can give me a message

Gulp Multi-image Auto-synthesis Sprite chart