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 ;}