Как заставить gulp.watch реагировать только на сохранение, а не любое изменение файлов?

Gulp.js - это мощный инструмент для автоматизации задач в разработке веб-приложений. Одной из ключевых функций Gulp.js является возможность отслеживания изменений в файлах и автоматической пересборки проекта при сохранении.

Основной метод, используемый для отслеживания изменений файлов в Gulp.js, - это gulp.watch(). Этот метод позволяет указать путь к файлам, которые нужно отслеживать, и определить задачи, которые нужно выполнять при изменении этих файлов.

По умолчанию, gulp.watch() реагирует на любое изменение файлов в указанном пути, включая изменение содержимого файлов. Однако, в некоторых случаях, может быть желательно настроить gulp.watch(), чтобы он реагировал только на сохранение файлов, а не на каждое их изменение.

Существует несколько способов достичь такого поведения в Gulp.js. Ниже приведены два наиболее распространенных подхода.

1. Использование опции events

Метод gulp.watch() принимает в качестве второго аргумента объект с опциями, в том числе с опцией events, которая позволяет указать, на какие события реагировать. Вместо использования значений по умолчанию, можно указать только change, чтобы отслеживать только сохранение файлов:

gulp.watch('src/**/*.js', { events: 'change' }, gulp.series('build'));

2. Использование промисов или async/await

Второй подход заключается в использовании промисов или синтаксиса async/await для обработки событий изменения файлов. Можно обернуть вызов gulp.watch() в промис и добавить проверку на то, изменилось ли содержимое файла, чтобы реагировать только на сохранение:

const fs = require('fs');
const { promisify } = require('util');

const readFile = promisify(fs.readFile);

gulp.task('watch', () => {
  return new Promise((resolve, reject) => {
    gulp.watch('src/**/*.js', async (path, stats) => {
      const fileContent = await readFile(path, 'utf8');
      const isContentChanged = stats === undefined || fileContent !== stats.ino;

      if (isContentChanged) {
        await gulp.series('build')();
      }
    });
  });
});

Оба подхода одинаково эффективны и позволяют достичь желаемого результата. Выбор между ними зависит от предпочтений и стиля кода, используемого в проекте.

Надеюсь, эти подробные объяснения помогут вам настроить gulp.watch() в Gulp.js и реализовать точное отслеживание сохранения файлов.