Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

Watch Gulp

Важной функцией из встроенных в основной пакет Gulp является функция watch(). Как можно понять по её названию, её основная цель — отслеживание. Но отслеживание чего и как? Об этом мы и поговорим в этом уроке.

Функция watch() вынесена в отдельный урок не просто так — её функционал и применение значительно шире, чем при использовании уже изученных команд, например src(). Watch — это не просто функция внутри задачи, а это и есть задача сама по себе, которая начинает свою работу сразу при выполнении команды gulp и завершает свою работу при завершении работы всего скрипта.

Для начала разберёмся, как задать отслеживание файла. Для этого используется сама функция watch(), которая принимает три основных параметра:

  1. Пути к отслеживаемым файлам
  2. Параметры отслеживания
  3. Функция или задача, которая вызывается при изменении файла

Второй параметр часто опускают, и тогда вотчер (так часто называют функции, которые занимаются отслеживанием каких-либо действий) выглядит примерно следующим образом:

const { watch } = require('gulp');

const watchers = () => {
  watch('dist/sass/app.scss', (done) => {
    console.log('Ой, файл app.scss изменился');

    done();
  });
};

exports.watchers = watchers;

Вызов watch с анонимной функцией


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


Функция, которая была передана в качестве аргумента watch() ничем не отличается от того, что использовалось в прошлых уроках. Главное отличие — она не имеет названия, такие функции ещё называют анонимными. Это не обязательное требование, например, мы можем создать функцию и указать её название в качестве параметра. Это не изменит поведение работы watch. То есть пример выше равнозначен следующему примеру:

const { watch } = require('gulp');

const changeAppStylesFile = (done) => {
  console.log('Ой, файл app.scss изменился');

  done();
};

const watchers = () => {
  watch('dist/sass/app.scss', changeAppStylesFile);
};

exports.watchers = watchers;

Вызов watch с анонимной функцией

Обратите внимание, что во втором примере при изменении файла Gulp пишет название функции, которая вызывалась, потому что теперь она не анонимная. При изменении файла вызывается функция changeAppStylesFile(), что видно в выводах самого Gulp.

События

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

Для этого используется второй параметр функции watch() который определяет параметры работы функции. За то, на какие действия будет происходить вызов задачи отвечает параметр events. Внутри него можно указать или одно конкретное событие или сразу несколько. Разберёмся с тем, какие именно события доступны при использовании Gulp:

  • add — добавление нового файла
  • change — изменение файла
  • unlink — удаление файла
  • addDir — добавление директории
  • unlinkDir — удаление директории
  • ready — окончание сканирования путей для отслеживания. В этот момент вотчер готов следить за изменениями. Такой этап можно назвать окончанием инициализации
  • error — ошибка работы отслеживания

По умолчанию параметр events имеет значение all, что указывает на отслеживание всех событий. Исключением являются события ready и error, так как они относятся больше к внутренней логике работы самой функции.

const { watch } = require('gulp');

const changeAppStylesFile = (done) => {
  console.log('Ой, файл app.scss изменился');

  done();
};

const checkFileStructure = (done) => {
  console.log('Изменилась структура файлов');

  done();
};

const watchers = () => {
  // Отслеживание только события `change`
  watch('dist/sass/app.scss', { events: 'change' }, changeAppStylesFile);

  // Отслеживание удаления и добавления файлов в директории
  watch('dist/sass/', { events: ['add', 'unlink'] }, checkFileStructure);
};

exports.watchers = watchers;

Отслеживание изменений в Gulp

В большинстве случаев используют событие по умолчанию, то есть all. Так как для компиляции SASS, Pug и других препроцессоров/шаблонизаторов критично не только изменение файлов, но и их добавление/удаление.


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



Самостоятельная работа

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


Аватары экспертов Хекслета

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.

Ошибки, сложный материал, вопросы >
Нашли опечатку или неточность?

Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

  • задайте вопрос. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
  • расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
  • изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.

Об обучении на Хекслете

Для полного доступа к курсу нужен базовый план

Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.

Получить доступ
900
упражнений
2000+
часов теории
3200
тестов

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.

  • 130 курсов, 2000+ часов теории
  • 900 практических заданий в браузере
  • 360 000 студентов
Даю согласие на обработку персональных данных, соглашаюсь с «Политикой конфиденциальности» и «Условиями оказания услуг»

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Aviasales
Логотип компании Yandex
Логотип компании Tinkoff
Рекомендуемые программы

С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.

Иконка программы Верстальщик
Профессия
Вёрстка с использованием последних стандартов CSS
в любое время 5 месяцев

Используйте Хекслет по максимуму!

  • Задавайте вопросы по уроку
  • Проверяйте знания в квизах
  • Проходите практику прямо в браузере
  • Отслеживайте свой прогресс

Зарегистрируйтесь или войдите в свой аккаунт

Даю согласие на обработку персональных данных, соглашаюсь с «Политикой конфиденциальности» и «Условиями оказания услуг»

Изображение Тото

Задавайте вопросы, если хотите обсудить теорию или упражнения. Команда поддержки Хекслета и опытные участники сообщества помогут найти ответы и решить задачу