How can I run a gulp imagemin task only on new and changed files?

Question

I tried to add a gulp task like below and run gulp images so that it only runs only on added/changed files However, that seems to not work...Any idea?

  gulp.task('images', function (event) {
  switch (event.type)
  {
    case 'added':
    case 'changed':
      gulp.src(event.path)
        return gulp.src(config.images.src)
        .pipe(imagemin({
          optimizationLevel: 5,
          progressive: true,
          svgoPlugins: [{removeViewBox: false}],
          use: [pngcrush()]
        }))
        .pipe(gulp.dest(config.images.dest));
      break;
  }
});

Answer 1

You can use gulp-newer to only pass newer files.

Insert a pipe before imagemin with the destination folder as parameter.

gulp.task('images', function (event) {
  gulp.src(event.path)
    return gulp.src(config.images.src)
    .pipe(newer(config.images.dest))
    .pipe(imagemin({
      optimizationLevel: 5,
      progressive: true,
      svgoPlugins: [{removeViewBox: false}],
      use: [pngcrush()]
    }))
    .pipe(gulp.dest(config.images.dest));
});

Answer 2

Besides gulp-newer as mentioned by @Headwiki, the other popular tool for this is gulp-changed.

Depending on your exact needs gulp-newer or gulp-changed might be better… or for your project it might not make a different. For more on that, see the question "gulp-newer vs gulp-changed?"