Evaluate gulp.lastRun()

[brendanfalkowski]

Background

Evaluate if the gulp-changed package can be replaced by the Gulp 4 function gulp.lastRun().

In this repo, gulp-changed was used to speed up builds by avoiding reprocessing all images on subsequent runs.

If gulp.lastRun() can do equivalent work without adding a package dependency then we'll use the Gulp-native feature.

Evaluation scenarios

Old code — using gulp-changed package

See: https://www.npmjs.com/package/gulp-changed

function image () {
    var task = config.task.image;

    return pipeline([
        gulp.src(task.src),
        changed(task.dest),
        imagemin([
            imagemin.gifsicle(task.imageminOptions.gif),
            imagemin.jpegtran(task.imageminOptions.jpg),
            imagemin.optipng(task.imageminOptions.png),
            imagemin.svgo(task.imageminOptions.svg)
        ]),
        gulpif(!hideNotify, notify(task.notifyOptions)),
        gulp.dest(task.dest)
    ], errorFormatter);
};

Test — Run gulp watch, then add one image file ✅ All images processed, then one image processed

Test — Run gulp image, then run gulp image ✅ All images processed, then no images processed

New code — using gulp.lastRun()

See: https://gulpjs.com/docs/en/api/lastrun

function image () {
    var task = config.task.image;

    return pipeline([
        gulp.src(task.src, { since: gulp.lastRun(image) }),
        imagemin([
            imagemin.gifsicle(task.imageminOptions.gif),
            imagemin.jpegtran(task.imageminOptions.jpg),
            imagemin.optipng(task.imageminOptions.png),
            imagemin.svgo(task.imageminOptions.svg)
        ]),
        gulpif(!hideNotify, notify(task.notifyOptions)),
        gulp.dest(task.dest)
    ], errorFormatter);
};

Test — Run gulp watch, then add one image file ✅ All images processed, then one image processed

Test — Run gulp image, then run gulp image ❌ All images processed, then all images processed

[brendanfalkowski]

The only context affected by swapping techniques is when running gulp image then gulp image again. This is uncommon during dev, but is superior when using the gulp-changed package no images are processed the second time.

Other contexts like running gulp and gulp watch behave the same because these internally trigger gulp clean first which forces all images to be processed. This is the routine used 99.9% of the time during development.

So, using gulp.lastRun() is a good simplification that reduces packages.

I will remove the gulp-changed package.

[brendanfalkowski]

@phated thanks for the tip here: https://github.com/gravitydepartment/frontend-starter/pull/2#issuecomment-473453195

[brendanfalkowski]

Note to self: using neither technique is not a good approach.

Running gulp image multiple times, or adding an image with a watcher always causes all images to be processed (not good).