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