How to generate two or more sprite files in gulp?

Question

JavaScript

Actually the question is in the title, I will only add that I use gulp.spritesmith The task
looks like this:

gulp.task('sprite:build', function() {
  var spriteData = 
    gulp.src(path.src.spriteOrigin_1)
      .pipe(plumber())
      .pipe(spritesmith({
        imgName: path.build.spriteImgName_1,
        cssName: '_sprite-data-1.scss',
        cssFormat: 'scss',
        algorithm: 'binary-tree',
        cssTemplate: 'sass.template.mustache',
        cssVarMap: function(sprite) {
          sprite.name = 's-' + sprite.name
        }
      }));

  spriteData.img.pipe(gulp.dest(path.build.spriteImgPath));
  spriteData.css.pipe(gulp.dest(path.src.spriteSass));
});

It also generates a scss file with variables in which the data for each image, for example

$s-pic-1: 0px 187px 0px -187px 186px 191px 593px 532px '../img/sprite/sprite-2.png';

These variables are template generated from the sass.template.mustache file , its content is

{{#items}}
${{name}}: {{px.x}} {{px.y}} {{px.offset_x}} {{px.offset_y}} {{px.width}} {{px.height}} {{px.total_width}} {{px.total_height}} '{{{escaped_image}}}';
{{/items}}

I tried to create the same task, but with a different path for the sources. As a result, the sprite is generated, but in addition to this, folders with source files are spit out into the production folder. The second file with variables is also generated, but for some reason the sass mixin stops seeing variables from both files now. With one task everything works fine.
The mixin looks like this:

@mixin spriteWidth($sprite) {
  width: nth($sprite,5);
}
@mixin spriteHeight($sprite) {
  height: nth($sprite,6);
}
@mixin spritePosition($sprite) {
  background-position: nth($sprite,3) nth($sprite,4);
}
@mixin sprite($sprite) {
  @include spritePosition($sprite);
  @include spriteWidth($sprite);
  @include spriteHeight($sprite);
}

In general, help to understand.

Answer 1

Somewhere you have an error, most likely in the paths.
My sprites are generated in a similar way.
Sources:
There is a folder /images in it I have two folders for two different templates of the same site, let's say /sprite-1 and /sprite-2
Each folder has its own images.
Next:
1. Make two tasks with different names
2. In gulp.src, specify your path to the sources for each task
3. In imgName, specify a different name, it will be written to the template
4. In cssName, specify different names of the generated file with variables, otherwise it will overwrite.
5. Leave the path to the .mustache template the same
Output:
/img
--/sprite-1
--/sprite-2
The only thing I don’t like is the different folders that are issued, for some reason it didn’t turn out to be thrown into one, well, and the fact that there are two different tasks.
Ideally, I would like to have a smart generator that would look at the names of the source files and break them into sprites, you can set prefixes and not take a steam bath. Plus the maximum number of images "included" in the sprite, otherwise it swells.