Gulp.watch — это инструмент в автоматизации задач разработки на основе потоков в Gulp. Он позволяет отслеживать изменения в файлах и выполнять определенные действия при сохранении. Однако по умолчанию gulp.watch реагирует на различные события, такие как добавление, изменение или удаление файлов. В некоторых случаях возникает необходимость настроить gulp.watch таким образом, чтобы он реагировал только на сохранение файлов. В этой статье мы рассмотрим, как это сделать.
Для того чтобы gulp.watch реагировал только на сохранение файлов, мы можем использовать свойство debounceDelay. Это свойство устанавливает задержку (в миллисекундах) перед выполнением задачи после изменения файла. При этом, если файл будет сохранен в течение задержки, таймер будет перезапущен и задача не будет выполнена до истечения задержки.
gulp.watch(‘src/*.html’, { debounceDelay: 2000 }, function() {
// Ваша задача
});
В данном примере gulp.watch будет отслеживать изменения в файлах с расширением .html в папке src. Однако задача не будет выполнена, если файл будет сохранен в течение 2 секунд после последнего изменения.
Правильная настройка gulp.watch
Чтобы правильно настроить gulp.watch, чтобы он реагировал только на сохранение файлов, необходимо использовать опцию debounce и задать ей время задержки. Это позволяет gulp.watch игнорировать несколько изменений, происходящих в течение указанного периода времени после первого изменения файла.
Вот пример правильной настройки gulp.watch:
| gulp.task(‘watch’, function() { |
|---|
| gulp.watch(‘src/**/*.css’, { debounceDelay: 200 }, [‘styles’]); |
| gulp.watch(‘src/**/*.js’, { debounceDelay: 200 }, [‘scripts’]); |
| gulp.watch(‘src/**/*.html’, { debounceDelay: 200 }, [‘html’]); |
| }); |
В данном примере gulp.watch реагирует только на сохранение файлов с расширением .css, .js и .html в директории src и ее поддиректориях. Опция debounceDelay устанавливает задержку в 200 миллисекунд после первого изменения, в течение которой gulp.watch игнорирует последующие изменения.
Такая настройка позволяет сократить количество лишних запусков задач и повысить производительность сборки проекта с использованием Gulp.js.