title: How can I name the files a pipe function create in gulp?
body: <p>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.</p>
  
  <p>I create 3 internal tasks to create the 3 variants of images. The issue appear when I merge them for <code>spritesmith</code> and try to optimize the output image.</p>
  
  <p>(Note: This is not the original question, but I found the issue)</p>
  
  <p>I realized that the files created with <code>gm</code> doesn't have any name, therefore <code>spritesmith</code> doesn't know which name to give to the CSS rules.</p>
  
  <pre><code>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);
      })) // &lt;&lt;&lt;--- 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()) // &lt;-- Error here &lt;&lt;------------
          .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);
  
  });
  </code></pre>
  
  <p>The error:</p>
  
  <pre><code>'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)
  </code></pre>
  
  <p>I tried to <code>gulp.dest</code> after merging:</p>
  
  <pre><code>var spriteData = merged_images
          .pipe(spritesmith({
              imgName: 'sprite.png',
              cssName: 'sprite.scss',
              padding: 3,
          }))
          .pipe(spritesmash())
          .pipe(gulp.dest(dest));
  </code></pre>
  
  <p>I get a file but I still have an error but no trace.</p>
  
  <p>How can I make this working?</p>
  
  <p>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.</p>