The Gulp command automatically generates the sprite, And the gulp command automatically generates

The Gulp command automatically generates the sprite, And the gulp command automatically generates
File directory description

Gulpfile. js Code

Var gulp = require ('gulp'); var spritesmith = require ('Gulp. spritesmith '); var imagemin = require ('Gulp-imagemin'); var runSequence = require ('run-sequence'); var open = require ('Gulp-open '); var configs = {// modify the image position spritesSource: 'img /*. png ', spritesMithConfig: {imgName: 'icons.png', cssName: 'icons.css ', algorithm: 'binary-tree', padding: 6, cssVarMap: function (sprite) {sprite. name = sprite. name }}, spritesOutputPath: 'output/'} // total command gulp. task ('sprite ', function (callback) {runSequence ('sprite: built', 'sprite: images', callback)}); gulp. task ('sprite: built', function () {var spriteData = gulp. src (configs. spritesSource ). pipe (spritesmith (configs. spritesMithConfig); return spriteData. pipe (gulp. dest (configs. spritesOutputPath);}); // compress gulp. task ('sprite: images ', function () {return gulp. src (configs. spritesOutputPath + '/**/*. + (png | jpg | jpeg | gif | svg) ') // Caching images that ran through imagemin. pipe (imagemin ({interlaced: true ,})). pipe (gulp. dest (configs. spritesOutputPath ))});

Generated Sprite and css

A css class name with the same name as the original image will be generated when a Sprite is generated, making it easier to use.

. Icon {display: inline-block;} // HTML code <I class = "icon-home"> </I> */. icon-card {background-image: url(icons.png); background-position:-48px-166px; width: 30px; height: 30px ;}. icon-help {background-image: url(icons.png); background-position: 0px-166px; width: 42px; height: 42px ;}. icon-location {background-image: url(icons.png); background-position:-192px-166px; width: 18px; height: 18px ;}. icon-money {background-image: url(icons.png); background-position:-84px-166px; width: 30px; height: 30px ;}. icon-note {background-image: url(icons.png); background-position:-120px-166px; width: 30px; height: 30px ;}. icon-popbg {background-image: url(icons.png); background-position: 0px 0px; width: 630px; height: 160px ;}. icon-user {background-image: url(icons.png); background-position:-156px-166px; width: 30px; height: 30px ;}