gulp-rename creating unnecessary directories

Question

I am using gulp to resize and rename some images:

var gulp = require('gulp');
var imageResize = require('gulp-image-resize');
var changed = require('gulp-changed');
var rename = require('gulp-rename');

var resizeImages = function resize(options) {
  gulp
    .src('original-images/**')
    .pipe(changed('./'))
    .pipe(imageResize({ width: options.width }))
    .pipe(rename((path) => { path.basename += options.fileSuffix; }))
    .pipe(gulp.dest('public/assets/img/'));
};


gulp.task('resize-images', () => {
  const desktopImageResizeOptions = {
    width: 356,
    fileSuffix: '-desktop',
  };
  const tabletImageResizeOptions = {
    width: 291,
    fileSuffix: '-tablet',
  };
  const phoneImageResizeOptions = {
    width: 721,
    fileSuffix: '-phone',
  };
  resizeImages(desktopImageResizeOptions);
  resizeImages(tabletImageResizeOptions);
  resizeImages(phoneImageResizeOptions);
});

This works - it puts the resized renamed images into the correct location, with the suffix added to the file name.

However, it also creates directories called -desktop, -phone and -tablet. How can I prevent this happening?

Answer 1

I solved it by specifying file endings, and therefore not passing in the directories. So the src on line 8 became

.src('original-images/**/*.{jpg,png}')

Answer 2

You can also deal with more complex cases. If the function passed to the rename function doesn't change the file's path it will be omitted. In the following example the file will not be renamed if it hasn't an extname

.pipe(rename(function (path) {
    if (path.extname !== "") {
        path.basename += "-" + options.width;
    }            
}))