0

I want gulp to track folders for new files (not just file updates). I tried to use gulp.watch and gulp-watch plugin, both not working for adding new files.

I'm going to add simplified versions of my gulp (for example I'll use only images folder)

First option with gulp.wath:

const gulp = require('gulp');
const runSequence = require('run-sequence');

let dev = true;

// clean the build directory
gulp.task('clean', del.bind(null, ['public/build']));

// proceed and copy all images to build directory
gulp.task('images', () => {
    return gulp.src('assets/images/**/*')
        .pipe($.cache($.imagemin()))
        .pipe(gulp.dest('public/build/images'));
});


// build for development with watching for a changes
gulp.task('watch', () => {
    runSequence(['clean'], ['images'], () => {
        console.log('WATCHING FOR A CHANGES');

        gulp.watch([
            'assets/images/**/*',
        ]).on('change', reload);
    });
});

Second option with gulp.wath:

const gulp = require('gulp');
const runSequence = require('run-sequence');

let dev = true;

// clean the build directory
gulp.task('clean', del.bind(null, ['public/build']));

// proceed and copy all images to build directory
gulp.task('images', () => {
    return gulp.src('assets/images/**/*')
        .pipe($.cache($.imagemin()))
        .pipe(gulp.dest('public/build/images'));
});


// build for development with watching for a changes
gulp.task('watch', () => {
    runSequence(['clean'], ['images'], () => {
        console.log('WATCHING FOR A CHANGES');

         gulp.watch('assets/images/**/*', ['images']);
    });
});

Opotion with gulp-wath:

const gulp = require('gulp');
const runSequence = require('run-sequence');
const watch = require('gulp-watch');

let dev = true;

// clean the build directory
gulp.task('clean', del.bind(null, ['public/build']));

// proceed and copy all images to build directory
gulp.task('images', () => {
    return gulp.src('assets/images/**/*')
        .pipe($.cache($.imagemin()))
        .pipe(gulp.dest('public/build/images'));
});


// build for development with watching for a changes
gulp.task('watch', () => {
    runSequence(['clean'], ['images'], () => {
        console.log('WATCHING FOR A CHANGES');

        watch('assets/images/**/*', function () {
            gulp.start('images')
        });
    });
});

neither of the provided options works for newly added files, the third option even do not track file changes at all but depends on this article it should work.

Bogdan Dubyk
  • 4,756
  • 7
  • 30
  • 67

0 Answers0