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

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

有没有办法保存两个图像。一个叫test.jpg960px，一个叫test@2x.jpg1920px？

任何帮助表示赞赏。提前致谢！

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