Gulp. Что это такое и как им пользоваться?

Всем привет! 👋

Сегодня мы с вами поговорим про Gulp!

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

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

Что такое Gulp?

Gulp — это инструмент для автоматизации задач, который выполняет заданные инструкции по очереди. В отличие от других решений, Gulp не предлагает готовых инструментов для сборки проекта, но позволяет гибко настроить процесс сборки с использованием необходимых модулей.

Многие разработчики выбирают Webpack в качестве альтернативы Gulp. Webpack — это мощный инструмент для сборки модулей, который специализируется на приложениях, написанных на JavaScript. Его ключевое преимущество заключается в том, что он предлагает готовые механизмы для сборки проектов «из коробки», что делает его особенно удобным для сложных приложений.

Webpack не просто объединяет файлы, он позволяет управлять зависимостями, загружать различные типы ресурсов (такие как CSS, изображения, шрифты), а также транспилировать код, например, с использованием Babel для поддержки старых браузеров. Он автоматически обрабатывает модули и файлы в соответствии с вашими настройками, что упрощает процесс оптимизации и ускоряет сборку приложения.

С Webpack легко реализовать такие важные задачи, как динамическая подгрузка модулей, разделение кода и настройка горячей перезагрузки (hot-reload), когда изменения в коде моментально отображаются в браузере без перезапуска сервера. Это делает Webpack особенно полезным для проектов, требующих высокой производительности и масштабируемости.

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

Автоматизация задач с помощью модулей

Работа с веб-проектами часто включает выполнение однотипных задач:

• проверка HTML-разметки и CSS на ошибки;
• преобразование кода из CSS-препроцессоров (например, Sass) в обычный CSS;
• проверка JavaScript на соответствие стандартам;
• объединение нескольких CSS или JS файлов в один;
• минификация больших файлов для ускорения загрузки;
• проверка изменений в браузере с помощью «live-reload» (автоматическая перезагрузка);
• создание финальной сборки проекта.

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

gulpfile.js и основные команды

Все инструкции по настройке задач для проекта прописываются в файле gulpfile.js. Этот файл служит основным скриптом, который управляет сборкой. Чтобы настроить задачи, нужно подключить основные функции Gulp:

const { src, dest, parallel, series, watch } = require('gulp')

Вот что делают эти функции:

• src() — читает исходные файлы;
• dest() — записывает результат в конечные файлы;
• parallel() — запускает задачи параллельно;
• series() — выполняет задачи поочерёдно;
• watch() — следит за изменениями в файлах и запускает соответствующие задачи.

Подключение модулей

Далее необходимо подключить нужные модули, которые добавляют различные функции:

const sass = require('gulp-sass')(require('sass'))
const browserSync = require('browser-sync').create()
const autoprefixer = require('gulp-autoprefixer')

Эти модули помогают, например, компилировать Sass в CSS, автоматически добавлять префиксы для CSS-свойств и обновлять браузер при изменении файлов.

Создание задач

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

function styles() {
  return src('src/sass/**/*.scss') // исходные файлы
    .pipe(sass())                   // компиляция в CSS
    .pipe(autoprefixer())            // добавление префиксов
    .pipe(dest('dist/css'))          // сохранение результата
}

Эта задача читает все .scss файлы, компилирует их в CSS, добавляет префиксы для кроссбраузерности и сохраняет результат в папку dist/css.

Чтобы сделать задачу доступной в любом месте файла, ей нужно присвоить имя, например, через экспорт:

exports.styles = styles;

Теперь эту задачу можно вызвать напрямую через команду gulp styles.

Определение задачи — task

Давайте создадим инструкцию для обработки файлов стилей, использующих CSS-препроцессор SASS. Для этого мы установим следующую последовательность действий:

1. Обратиться к исходному файлу в папке /src/styles/.
2. Преобразовать синтаксис SASS в стандартный CSS.
3. Вывести в терминале сообщения об ошибках, если они есть в исходном файле.
4. Сохранить окончательный файл в папку /public/styles/.
5. Применить новые стили к открытой странице в браузере с помощью модуля BrowserSync.

Создание задачи

До третьей версии Gulp задачи создавались с помощью встроенной функции gulp.task(). Вот пример кода для нашей задачи:

gulp.task('styles', function() {
  return src('./src/styles/style.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(dest('./public/styles/style.css'))
    .pipe(browserSync.stream())
});

Этот код регистрирует задачу с именем styles, что позволяет ей взаимодействовать с рабочим окружением. Теперь мы можем запускать эту задачу как отдельно с помощью команды gulp styles, так и в составе более сложных задач (таких как watch, default и другие).

Определение задачи — function

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

function styles() {
  return src('./src/styles/style.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(dest('./public/styles/style.css'))
    .pipe(browserSync.stream());
}

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

exports.styles = styles;

После этого функция станет доступной для запуска как отдельная команда gulp styles или в рамках более сложной задачи.

Мониторинг изменений в проекте

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

Для примера с отслеживанием изменений в файлах стилей задача может выглядеть следующим образом:

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

Пример кода для отслеживания изменений:

function watch_dev() {
  watch('./src/styles/style.css', styles).on(
    'change',
    browserSync.reload
  );
}

В этом примере функция watch_dev будет следить за изменениями в файле style.css, и каждый раз, когда файл будет сохранён, задача styles будет выполнена, а браузер автоматически обновится для отображения новых стилей.

Управление проектом и его сборка

Запуск проекта в режиме разработки осуществляется через сводную задачу default, имя которой зарезервировано в Gulp. В следующем примере эта задача будет выполнять и отслеживать экспортированные ранее функции в параллельном режиме:

exports.default = parallel(
  styles,
  scripts,
  pages,
  watch_dev
);

Поскольку default — это задача по умолчанию, запустить её можно просто командой gulp.

Запуск проекта в режиме разработки

При запуске задачи default в платформе Doki, Gulp выполнит все указанные задачи одновременно и начнёт отслеживание изменений.

Сборка проекта

Для сборки итоговой версии проекта создаётся отдельная задача с произвольным именем, которая последовательно выполняет необходимые действия:

exports.build = series(
  styles,
  scripts,
  pages
);

После определения задачи build, для сборки финальной версии проекта необходимо ввести в терминале команду gulp build. Эта команда последовательно выполнит все шаги, указанные в задаче, обеспечивая готовность проекта к развертыванию.

Дополнительные материалы

Gulp.js: Сайт

Документация Gulp на русском

GeekBrains. Gulp: кому нужен и как начать работу

Современный учебник по JavaScript: «Скринкаст по Gulp»

«Gulp 2024, полное руководство, современный синтаксис»