Gulp-image size with multiple images
Is it possible that gulp-image-resize spits out multiple images like @ 1x and @ 2x image. My gulp task looks like this:
gulp.task('images', function() {
return gulp.src('test.jpg')
.pipe(imageResize({ width: 1920 }))
.pipe(imagemin({
progressive: true
}))
.pipe(rename({
suffix: '@2x'
}))
.pipe(gulp.dest('./_site/public/img'))
.pipe(imageResize({ width: 960 }))
.pipe(imagemin({
progressive: true
}))
.pipe(gulp.dest('./_site/public/img'))
});
But it just puts an image titled test@2x.jpg
with 960px width in my target directory.
Is there a way to save two images. One is called test.jpg
the width of 960px, and one is called test@2x.jpg
the width of 1920px?
Any help is appreciated. Thanks in advance!
+3
source to share
1 answer
You are renaming the file too early, just put the rename pipe after the first gulp.dest.
gulp.task('images', function() {
return gulp.src('test.jpg')
.pipe(imageResize({ width: 1920 }))
.pipe(imagemin({
progressive: true
}))
.pipe(gulp.dest('./_site/public/img')) // move this line to before the gulp.dest
.pipe(rename({
suffix: '@2x'
}))
.pipe(imageResize({ width: 960 }))
.pipe(imagemin({
progressive: true
}))
.pipe(gulp.dest('./_site/public/img'))
});
+1
source to share