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?

Answers


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

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

Need Your Help

maximum number of port can open in Socket connection in j2me

sockets java-me port connection

What is maximum number ports can open at a same time using socket connection in J2me mobile devices for a IM application.