How can I make a directory always listening?

Question

I use gulp.js to minify, compress, optimize my static files. Now I have a directory contains all users' avatars. When a user registers, my PHP code will generate an avatar for him and copy/paste it into that directory.

The size of an avatar is almost 20kb. I can call this task manually every time on that directory to reduce images (avatars) sizes:

const gulp = require('gulp');
const imagemin = require('gulp-imagemin');

gulp.task('compress_avatars', () =>
    gulp.src('pure/img/avatars/*')
        .pipe(imagemin())
        .pipe(gulp.dest('product/img/avatars'))
);

It works as well and make the size of images almost 3kb. All fine. Now I want to know, how can I make it automatically (real time listening)? I mean, when an image added to this directory I need to reduce its size automatically (without executing gulp compress_avatars every time by by hand) ?

Answer 1

You can use gulp.watch instead gulp.src to check any change in this directory and compress your avatars files.

const gulp = require('gulp');
const imagemin = require('gulp-imagemin');

gulp.task('compress_avatars', () =>
  gulp.watch('pure/img/avatars/*', {ignoreInitial: false})
    .pipe(imagemin())
    .pipe(gulp.dest('product/img/avatars'))
);

You must know that this task will not stop until you send a Ctrl-c (SIGINT signal), but if you close the terminal you will close the task!