Как в gulp настроить изменение и удаление ненужных файлов с помощью gulp-watch?

Question

[Александр Плут]

Есть папка с проектом build, в которой находятся все исходные файлы. Проект собирается в папке public. Как с помощью плагина gulp-watch отслеживать измененные и удаленные файлы и сразу удалять в собранном проекте, который находится в папке public?

Answer 1

[Appp Zooo]

Пришел к выводу что для вас лучше использовать gulp-sync-files или gulp-dir-sync вместо clean/del, и запускать таски после синхронизации.

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/'));
});

Старый ответ:

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);
});

Или вот так если фуллстак.

Comments

[Александр Плут]

Меня интересует именно работа с плагином gulp-watch

[Appp Zooo]

Александр Плут: я дополнил ответ там где ватч и дал еще 1 пример.

[Александр Плут]

Arthur Parkhisenko: на сколько я понимаю ты используешь gulp-clean?

[Appp Zooo]

Александр Плут: нет я использую просто del https://www.npmjs.org/package/del

[Александр Плут]

Arthur Parkhisenko: я хочу сделать конкретно с помощью gulp-watch

[Appp Zooo]

Александр Плут: сам по себе галп ватч не удаляет файлы, тебе надо или del или gulp-clean иначе никак. вот ссылка на документацию. он должен вызывать таск при наблюдении просто и все https://github.com/gulpjs/gulp/blob/master/docs/AP...

[Appp Zooo]

Александр Плут: ты пишешь ватч который следя за изменениями будет делать выбранное тобою действие, вот туда пишешь таск который в себе уже идет с очисткой (так меньше кода и так лучше по моему) либо ты пишешь выполнение сразу 2х тасков отдельно, клин и тот что тебя интересует).

[Appp Zooo]

Александр Плут: Пример двух тасков gulp.watch('js/**/*.js', ['clean','scripts']);

[Александр Плут]

Arthur Parkhisenko: в данной документации описывается встроенный функционал watch. А плагин gulp-watch ставится дополнительно

[Appp Zooo]

Александр Плут: аа я понял, понял тебя. Сейчас допишу ответ) но всеравно ватч не удаляет файлы :D

[Александр Плут]

Arthur Parkhisenko: буду благодарен!

[Appp Zooo]

Александр Плут: проверьте пожалуйста, если сработает я и себе заберу такой кусок, очень удобно получится когда ватч внутри таска тоже есть.