Get Gulp watch to perform function only on changed file

Question

I am new to Gulp and have the following Gulpfile

var gulp = require('gulp');
var jshint = require('gulp-jshint');
var concat = require('gulp-concat');
var rename = require('gulp-rename');
var uglify = require('gulp-uglify');

gulp.task('compress', function () {
    return gulp.src('js/*.js') // read all of the files that are in js with a .js extension
      .pipe(uglify()) // run uglify (for minification)
      .pipe(gulp.dest('dist/js')); // write to the dist/js file
});

// default gulp task
gulp.task('default', function () {

    // watch for JS changes
    gulp.watch('js/*.js', function () {
        gulp.run('compress');
    });

});

I would like to configure this to rename, minify and save only my changed file to the dist folder. What is the best way to do this?

Biegel

possible duplicate of How do I watch mutliple files with gulp-browserify but process only one? – Ineducable

Answer 1

This is how:

// Watch for file updates
gulp.task('watch', function () {
    livereload.listen();

    // Javascript change + prints log in console
    gulp.watch('js/*.js').on('change', function(file) {
        livereload.changed(file.path);
        gutil.log(gutil.colors.yellow('JS changed' + ' (' + file.path + ')'));
    });

    // SASS/CSS change + prints log in console
    // On SASS change, call and run task 'sass'
    gulp.watch('sass/*.scss', ['sass']).on('change', function(file) {
        livereload.changed(file.path);
        gutil.log(gutil.colors.yellow('CSS changed' + ' (' + file.path + ')'));
    });

});

Also great to use gulp-livereload with it, you need to install the Chrome plugin for it to work btw.

Torch

Is there a way to respect the glob? file.path returns the absolute path so ** are not respected when it comes to gulp.dest(). – Soutache

@Markus. look at gulp-changed – Sorosis

Answer 2

See incremental builds on the Gulp docs.

You can filter out unchanged files between runs of a task using the gulp.src function's since option and gulp.lastRun

Osterman

thanks @Osterman your answer led me to my fuller answer – Squinty

Answer 3

It depends if you are using gulp 4.0.2 or 3.9.1 (solution for both below)

If using gulp 4.0.2 you want to use the gulp.src function's since option and gulp.lastRun

const images = () => {
  return gulp.src(paths.images.src, {since: gulp.lastRun(images)})
    .pipe(imagemin({optimizationLevel: 5}))
    .pipe(gulp.dest(paths.images.dest));
}

Full docs here

If using gulp 3.9.1 I would recommend using gulp-cached and gulp-remember - example:

const gulp = require('gulp')
const cache = require('gulp-cached')
const cleanCSS = require('gulp-clean-css')
const remember = require('gulp-remember')
const sass = require('gulp-sass')(require('node-sass'))
const sourcemaps = require('gulp-sourcemaps')
// const tap = require('gulp-tap')
// const util = require('gulp-util')

gulp.task('scss', () => {
  return gulp.src(paths.scss.basic)
    // .pipe(tap(file => util.log('scss', file.path)))
    .pipe(cache('scss1')) // 81 FILES
    .pipe(sourcemaps.init())
    .pipe(remember('scss1')) // 81 FILES
    .pipe(sass(sassOptions).on('error', sass.logError))
    .pipe(cache('scss2')) // 10 FILES
    .pipe(cleanCSS())
    .pipe(remember('scss2')) // 10 FILES
    .pipe(sourcemaps.write('./'))
    .pipe(cache('scss3')) // 5 FILES
    .pipe(gulp.dest('./../../css'))
})

This is quite a complex example - generally gulp-cached should only be used where there is a 1:1 mapping in the stream. However, if you have a file count that changes as the stream progresses (e.g. when using gulp-concat) use gulp-remember in conjunction with gulp-cached. In the example above, gulp-cached is used when there is a new file count and gulp-remember is used before the file count changes. If you don't know the file count at various places in the stream then use util.log to see what's going on. Notice that the cache name changes, the cache and remember statements are paired by cache name!

NB file count here refers to the number of files passing through the stream before caching

Other gulp plugins that try to do the same thing but that don't improve things if file count changes are gulp-changed and gulp-newer. For a full gulp 3.9.1 list see here

NB gulp-changed supports gulp 3.9.1 ([email protected]) and gulp 4.0.2 (gulp-changed@latest)

Squinty