How can I name the files a pipe function create in gulp?

Question

I have a folder with big images. the goal is to create smaller images in color, black and white and then merge everything to create a sprite.

I create 3 internal tasks to create the 3 variants of images. The issue appear when I merge them for spritesmith and try to optimize the output image.

(Note: This is not the original question, but I found the issue)

I realized that the files created with gm doesn't have any name, therefore spritesmith doesn't know which name to give to the CSS rules.

var path = require('path')
var gulp = require('gulp')
var imagemin = require('imagemin')
var buffer = require('vinyl-buffer');
var merge = require('merge-stream');


var gm = require('gulp-gm');

var spritesmith = require('gulp.spritesmith');
var spritesmash = require('gulp-spritesmash');
var pngquant = require('imagemin-pngquant');

var source = "./testorig/"
var dest = "./test/"

gulp.task('sprites', function () {

    // Get files
    var files = gulp.src(source+'/*.png')

    // Create smaller images
    var _smaller = files.pipe(gm(function (gmfile) {
        return gmfile.resize(24, 24).unsharp('0x1');
    }))

    // Create smaller white images
    var _smaller_white = files.pipe(gm(function (gmfile) {
        return gmfile.resize(24, 24).unsharp('0x1').threshold(-1, true);
    }))

    // Create smallerblack images
    var _smaller_black = files.pipe(gm(function (gmfile) {
        return gmfile.resize(24, 24).unsharp('0x1').threshold(100, true);
    })) // <<<--- Files created have no names for the css creation process below

    // Merge all icons
    var merged_images = merge(_smaller, _smaller_white, _smaller_black)

    // Create sprite
    var spriteData = merged_images
        .pipe(spritesmith({
            imgName: 'sprite.png',
            cssName: 'sprite.scss',
            padding: 3,
        }))
        .pipe(spritesmash());


    // // Pipe image stream through image optimizer and onto disk
    var imgStream = spriteData.img
        .pipe(buffer()) // <-- Error here <<------------
        .pipe(imagemin({
            progressive: true,
            interlaced: true,
            optimizationLevel: 7,
            svgoPlugins: [{
                removeViewBox: false
            }, {
                removeUselessStrokeAndFill: false
            }],
            plugins: [

                pngquant({
                    quality: [70,90],
                    speed: 1
                })
            ]
        }))
        .pipe(gulp.dest(dest));

    // // Pipe CSS stream through CSS optimizer and onto disk
    var cssStream = spriteData.css
        .pipe(gulp.dest(dest + 'sprites'));

    // // Return a merged stream to handle both `end` events
    return merge(imgStream, cssStream);

});

The error:

'sprites' errored after 14 ms
[00:45:49] TypeError: Cannot read property 'pipe' of undefined
    at /srv/spritestest/gulpfile.js:50:10
    at taskWrapper (/srv/spritestest/node_modules/undertaker/lib/set-task.js:13:15)
    at bound (domain.js:301:14)
    at runBound (domain.js:314:12)
    at asyncRunner (/srv/spritestest/node_modules/async-done/index.js:55:18)
    at _combinedTickCallback (internal/process/next_tick.js:132:7)
    at process._tickCallback (internal/process/next_tick.js:181:9)

I tried to gulp.dest after merging:

var spriteData = merged_images
        .pipe(spritesmith({
            imgName: 'sprite.png',
            cssName: 'sprite.scss',
            padding: 3,
        }))
        .pipe(spritesmash())
        .pipe(gulp.dest(dest));

I get a file but I still have an error but no trace.

How can I make this working?

I would like to avoid multiple tasks as I may have other folder with other transform to apply and I would end up with 50 different tasks. Having them self contained make management easier for me.