gulp-image-resize to generate multiple output sizes

Remember: Gulp is just JavaScript.

There's nothing magical about gulp.task. You don't have to put everything in a Gulpfile inside of a task. Tasks are just functions.

You can leverage this fact and dynamically generate a bunch of tasks based on certain parameters, so you don't have duplicated code all over the place. In your case you can generate one task per image size that you want to create:

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

For 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();
}

The callback is used to signal async completion (required by Gulp 4).