How to set up changing and deleting unnecessary files in gulp using gulp-watch?

Question

gulp.js

There is a folder with the build project, which contains all the source files. The project is built in the public folder. How to use the gulp-watch plugin to track changed and deleted files and immediately delete them in the built project, which is located in the public folder?

Answer 1

I came to the conclusion that it is better for you to use gulp-sync-files or gulp-dir-sync instead of clean/del, and run tasks after synchronization.

gulp.task('img', function() {
    watch(paths.images, function() {
        del('public/images/*');
    })
    .pipe(imagemin({
        progressive: true,
        svgoPlugins: [{removeViewBox: false}],
        use: [pngcrush()]
    }))
    .pipe(gulp.dest('public/images/'));
});

Old answer:

gulp.task('watch', function() {
    gulp.watch(paths.styles, ['styles']);
    gulp.watch(paths.scripts, ['scripts']);
    gulp.watch(paths.images, ['images']);
});

//в Task переписать вместо
gulp.task('styles', function() {
//добавив , ['clean'] после названия
gulp.task('styles', ['clean'], function() {
//или в вотчере юзать 2 таска
gulp.watch('js/**/*.js', ['clean','styles']);

//Пример моего clean
var del = require('del'); // https://www.npmjs.org/package/del
gulp.task('clean', function(cb) {
    del(['dist'], cb);
});

Or like this if full stack.