gulp-image-resize With Multiple Images

Question

Is it possible to have gulp-image-resize spit out multiple images, for example a @1x and @2x image. My gulp task looks like this currently:

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 places an image called [email protected] with a width of 960px into my destination directory.

Is there a way to have two images saved. One called test.jpg with a width of 960px, and one called [email protected] with a width of 1920px?

Any help is appreciated. Thanks in advance!

Answer 1

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