grunt/gulp plugin to generate sprite?

Question

JavaScript

Good afternoon!
Can you please tell me if anyone has come across a plugin for grunt / gulp that works according to the algorithm:
1) extracts images from a certain folder;
2) glues them into a sprite;
3) runs through the already created css/scss file;
4) changes background-image: ... call;
5) on background: url('sprite.png') xy no-repeat;
It is assumed that the convenience of layout will improve and the time for creating sprites will decrease.
When typesetting, we don’t fill our heads with sprites, we just throw small pictures that should be in the sprite into a separate folder ... in css / scss for the necessary elements we specify these pictures. and then, during assembly, it runs through the pictures, glues them, and replaces their calls with calls from sptite.
I would be grateful for any ideas and tips. Thank you for your attention

Answer 1

I found a plugin for my needs:
https://github.com/iAdramelk/grunt-oversprite
True, I spent a day installing all the dependencies. It was hell)) If anyone will install - write to help.
The plugin itself has been tweaked a bit so that it displays in one line:
background: url('...') xy no-repeat;
Works with any preprocessor.
So overall I'm happy.
Thanks everyone for the replies

Answer 2

I wrote an article about generating sprites habrahabr.ru/post/227945
But with a slightly different approach.

Answer 3

Using smartsprites, here is the grant plugin: https://github.com/hogart/grunt-smartsprites.

Answer 4

Thanks for the great solution, I will use it in my project :)