gulpgulp-rename

gulp-rename creating unnecessary directories


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?


Solution

  • 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}')