具有多个图像的 gulp-image-resize

Question

有没有可能gulp-image-resize吐出多个图像，例如@1x 和@2x 图像。我的 gulp 任务目前看起来像这样:

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

但它只是将宽度为 960px 的名为 test@2x.jpg 的图像放入我的目标目录中。

有没有办法保存两张图片。一个叫test.jpg，宽度为960px，一个叫test@2x.jpg，宽度为1920px?

感谢任何帮助。提前致谢!

Answer 1

你重命名文件太早了，只需将重命名管道放在第一个 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'))
});