How to remove only what has been removed?

Question

gulp.js

There are such tricks

gulp.task('imgs', function() {
  return gulp.src('src/blocks/**/*.{jpg,jpeg,png,gif,svg}')
    .pipe(flatten())
    .pipe(gulp.dest('public/imgs'));
});

gulp.task('default', ['imgs'], function() {
  gulp.watch('src/blocks/**/*.{jpg,jpeg,png,gif,svg}', ['imgs']);
});

We start gulp. A public folder is created with an imgs folder containing all the images from the src/blocks/** folders.
If you add an image, for example, to the blocks folder, then watch will work and transfer this image to public / imgs, and if you delete the same image, then watch will also work, but the image from public / imgs will not be deleted.
There is an option to use del and delete the entire public / imgs folder and then re-collect all the old images and hook new ones with them and transfer them to public / imgs and when the image is deleted, the same thing will happen, but the deleted image will no longer exist, because gulp will rebuild all the images.
This method, to put it mildly, is so-so .. If there are few images, then it’s still okay, but if there are a lot, then it will already require some time.
We need a plugin that when gulp notices changes and goes through all blocks folders with src - gulp.src('src/blocks/**/*.{jpg,jpeg,png,gif,svg}'), compared all files that found with files that are in the public / imgs folder and deleted or added a specific file, and not all.
Does anyone know of a similar plugin? It is not necessary that it works as I described .. The main thing is that it deletes or adds a specific file.

Answer 1

don't bother, I think. make a clean task that cleans everything, which is run before building the production build.
But if you feel like it, look at Ilya Kantor's screencast. In one of the parts, he tells how you can do a synchronous deletion of files in dist and src

Answer 2

I agree about the trouble, it's not worth it, but if you really want to, then something like this:

// Gulp 4
gulp.watch( 'src/blocks/**/*.{jpg,jpeg,png,gif,svg}', gulp.series( 'imgs' ) ).on( 'unlink', function( delPath ) {

  let path = require( 'path' ), file = path.basename( delPath );

  try {

    require( 'fs' ).unlinkSync( path.join( 'public', 'imgs', file ) );

  } catch (e) { console.log(e); }

});