CODEWITHSUNDEEP
gulpgulp-rename
Edward
Edward

Reputation: 3499

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?

Upvotes: 2

Views: 218

Answers (2)

emartini
emartini

Reputation: 173

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;
    }            
}))

Upvotes: 0

Edward
Edward

Reputation: 3499

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

Upvotes: 0

Related Questions