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

Question

Донатос

gulp.js

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

Здравствуйте! Как можно настроить Gulp, чтобы вотчер реагировал только на сохранение файла с помощью комбинации клавиш Ctrl + S, а не каждый раз при внесении изменений в файл? Приведен код простого gulpfile для примера.

```javascript
const gulp = require('gulp');

function styles() {
  return gulp.src('./src/style.css')
    .pipe(gulp.dest('.app/'))
}

function watcher() {
  gulp.watch('./src/style.css', { events: 'change' }, styles);
}

exports.default = gulp.series(styles, watcher);
```

Когда я введу любые символы в файл `src/style.css`, вотчер будет реагировать только при сохранении файла с помощью комбинации клавиш Ctrl + S.

9 сентября 2023 г. 20:06

Ответы на вопрос 2

Похожие вопросы

Answer 1

Настройка `gulp.watch` для реагирования только на сохранение файла с помощью комбинации клавиш Ctrl + S может быть достаточно сложной, так как инструменты разработки (IDE или текстовые редакторы) обычно не передают информацию о нажатии клавиш в терминал или командную строку, запущенную через Gulp.

Однако, вы можете использовать пакет `gulp-changed`, чтобы ограничить выполнение задачи только тогда, когда файлы действительно изменяются.

Вот пример измененного кода:

```javascript
const gulp = require('gulp');
const changed = require('gulp-changed');

function styles() {
  return gulp.src('./src/style.css')
    .pipe(changed('.app/')) // Используем gulp-changed для проверки изменений
    .pipe(gulp.dest('.app/'))
}

function watcher() {
  gulp.watch('./src/style.css', { events: 'all' }, styles);
}

exports.default = gulp.series(styles, watcher);
```

Теперь задача `styles` будет выполнена только в случае, если файл `style.css` фактически изменен. Если вы, например, только открыли или переместили курсор по файлу без каких-либо изменений, задача `styles` не будет выполняться. C помощью пакета `gulp-changed` мы контролируем, что файл был фактически изменен перед его обработкой.

Обратите внимание, что частота запуска задачи `styles` всё равно остается зависеть от работы Gulp, поэтому возможно потребуется настроить вашу IDE или текстовый редактор таким образом, чтобы при сохранении файла использовалась сочетание клавиш Ctrl + S.

Answer 2

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

Для использования задержки ватчера в gulp, вы можете добавить параметр "delay" в функцию watcher. Например, функция может выглядеть так:

```javascript
function watcher() {
  gulp.watch('./src/style.css', { delay: 500 }, styles);
}
```

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