How to create a sprite from images with the same width and height via gulp?

Question

css

Challenge:
Lots of images, in multiple directories, with different extensions and different heights and widths.
In order not to handle all this manually:

1. Is there a plugin or algorithm in gulp that will allow you to find similar images with the same height and width and make a sprite out of them.
   
2. Only with the same height or only the same width or only the same extension and also make a sprite out of them
   

They suggested the gm plugin
aheckmann.github.io/gm/docs.html#imagemagick
But I have no idea how to use it and whether there are necessary options there.
Is it possible to add retina support to this.
Algorithm:

• Looking for similar images, usually icons
  
• We optimize
  
• Compressing into a sprite
  
• Squeezing into a sprite to support the retina
  
• Regular images in 1 directory
  
• With a retina in another
  
• css file with regular images in one directory
  
• Css file with retina to another.
  

Output structure:
index.html
-style

• all styles
  

-css

• sty.min.css
  
• sprite.css
  
• [email protected]
  

-images

1. all images
   

-img
--spite
[email protected]
Who solved this problem?
And how did you decide?

Answer 1

There are a lot of solutions now. In general, it’s not comme il faut to use png sprites, it’s better to take a vector right away (with a few exceptions, when you need to display complex gradients, we take a raster).
The workflow for working with such graphics is perfectly implemented in TARS , I recommend it.

Answer 2

Look here

Answer 3

There is a wonderful plugin gulp.spritesmith You
can do anything with it.
Did it somehow so that it was @1, @2, @4, and then used SASS. I threw everything into an array and parsed, through the same SASS, to the right place