gulp-image-resize 生成多种输出尺寸

Question

我想使用 gulp 生成一堆不同尺寸的图像并同时优化它们。我认为有两种方法可以解决这个问题：

首先，您可以为每种尺寸创建 n 个不同的任务，然后创建调用每个调整尺寸任务的主任务。主任务可能类似于：

gulp.task('resize_images',['resize_100','resize_300','resize_800','resize_1000']);

这似乎没问题，你会得到很好的并行化，但每个任务都有很多重复的代码，这意味着如果大小列表变得足够大，维护它可能是一场噩梦。

我的另一个想法是创建一个任务，但在其中使用 for 循环来遍历每个大小。像这样：

var gulp = require('gulp');
var imageminWebp = require('imagemin-webp');
var imageResize = require('gulp-image-resize');
var notify = require('gulp-notify');
var os = require('os');
var parallel = require('concurrent-transform');
var pipes = require('gulp-pipes');

gulp.task('resize_images', function() {

    var sizes = [100,300,800,1000,2000];
    var stream;

    for (size in sizes) {
        stream = gulp.src('images/master/**/*.{jpg,png,tiff}')
            .pipe(parallel(
                    imageResize({
                        width:  sizes[size],
                        height: sizes[size],
                        upscale: false
                }),
                os.cpus().length
            ))
           .pipe(pipes.image.optimize())
           .pipe(gulp.dest('images/derivative/' + sizes[size] + '/'))
           .pipe(imageminWebp({quality: 75})())
           .pipe(gulp.dest('images/derivative/' + sizes[size] + '/'))
   }
   return stream;
});

这看起来还可以，但由于某些原因感觉不到 gulp-y。例如，上述解决方案的通知很奇怪——我想在每个大小完成处理时发出通知，这是我通过单个主任务免费获得的。有没有更好的方法来完成我想做的事情？

Answer 1

记住：Gulp 就是 JavaScript。

gulp.task 没有什么神奇之处。您不必将所有内容都放在任务内的 Gulp 文件中。任务只是功能。

您可以利用这一事实并根据特定参数动态生成一组任务，这样就不会到处都是重复代码。在您的情况下，您可以为每个要创建的图像大小生成一个任务：

var resizeImageTasks = [];

[100,300,800,1000,2000].forEach(function(size) {
  var resizeImageTask = 'resize_' + size;
  gulp.task(resizeImageTask, function() {
    return gulp.src('images/master/**/*.{jpg,png,tiff}')
      .pipe(imageResize({
         width:  size,
         height: size,
         upscale: false
       }))
      .pipe(pipes.image.optimize())
      .pipe(gulp.dest('images/derivative/' + size + '/'))
      .pipe(imageminWebp({quality: 75})())
      .pipe(gulp.dest('images/derivative/' + size + '/'))
  });
  resizeImageTasks.push(resizeImageTask);
});

gulp.task('resize_images', resizeImageTasks);

Answer 2

对于Gulp 4:

var imagemin = require('gulp-imagemin');
var imageResize = require('gulp-image-resize');
var rename = require("gulp-rename");

function images(cb) {
  [100, 300, 800, 1000, 2000].forEach(function (size) {
    gulp.src('src/images/**/*.{jpg,jpeg,png}')
      .pipe(imageResize({ width: size }))
      .pipe(rename(function (path) { path.basename = `${path.basename}@${size}w`; }))
      .pipe(imagemin())
      .pipe(gulp.dest('dist/images'))
  });
  cb();
}

回调用于通知异步完成（Gulp 4 要求）。

gulp-image-resize 生成多种输出尺寸

gulp-image-resize to generate multiple output sizes

image-resizing

gulp