gulp-changed / gulp-newer + gulp-rename don't work

Question

I try to bypass minifying, resizing and renaming already processed images, and adding 'gulp-changed' changed nothing for me; all the files are processed, еvery time. I tried 'gulp-newer' instead, but still with no luck.

Later, I've figured out - if I'll spare gulp-rename, gulp-changed works fine. With gulp-rename in the task - it doesn't. But I need gulp-rename anyway...

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

var img_src = ['_img/**/*.jpg', '_img/**/*.png'];
var img_dest = '_site/img';

gulp.task('resize-xl', function () {
    return gulp.src(img_src)
    .pipe(changed(img_dest))
    .pipe(imageResize({
      width : 2048,
      crop : false,
      upscale : true,
      sharpen: false,
      quality: 1
    }))
    .pipe(imagemin({
            progressive: true,
            svgoPlugins: [{removeViewBox: false}],
            use: [pngquant()]
        }))
        .pipe(rename(function (path) {
          path.basename += "-2048";
        }))
        .pipe(gulp.dest(img_dest));
});

Answer 1

All the files are processed, еvery time because gulp-changed ( or gulp-newer) in your task check for changes to files with names of gulp.src(img_src). And since there are in img_dest dir no files with original names, task will be executed for all files in the img_src dir.

To solve this problem, you can use a staging directory for modified files. For example:

1) Create new directory, '_resize'.

2) Modify gulpfile.js:

var img_resize = '_resize';

gulp.task( 'resize-xl', function () {
    return gulp.src( img_src )
       .pipe( changed( img_resize ) )

       // add here your image plugins: imageResize, imagemin, ..

       // save the modified files with original names on '_resize' dir
       .pipe( gulp.dest( img_resize ) )

       .pipe( rename( { suffix: '-2048' } ) )
       // save the modified files with new names on destanation dir
       .pipe( gulp.dest( img_dest ) );
} );

After first run this task will process only new and changed files

Answer 2

You can also rename your file before piping the changed plugin so the plugin get the source file with the new name:

gulp.task( 'resize-xl', function () {
return gulp.src( img_src )
   // change name first
   .pipe( rename( { suffix: '-2048' } ) )
   .pipe( changed( img_dest ) )

   // add here your image plugins: imageResize, imagemin, ..

   .pipe( gulp.dest( img_dest ) );
} );