Как инструмент Gulp освобождает фронтенд-разработчиков от рутины

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

Если делать всё это вручную, разработка отнимет много времени. Gulp берёт рутину на себя. Так получается не только сэкономить время, но и снизить риск ошибок из-за ручного труда. Программа работает как таск-раннер — выполняет задачи, которые ей прописывают в конфигурационном файле.

Знание инструментов вроде Gulp важно для фронтенд-разработчиков. Специалисты, которые умеют сохранять порядок в коде и знают, как оптимизировать работу, ценятся выше. Какие ещё знания и навыки помогут найти первые проекты, расскажут на карьерном треке курса «Фронтенд-разработчик». Сначала студенты осваивают профессию и делают выпускной проект, а затем учатся составлять резюме, выбирать вакансии и проходить собеседования.

Для работы с Gulp понадобится Node.js — среда выполнения JavaScript. Его можно скачать с официального сайта. Установка не требует специальных знаний: достаточно запустить файл и следовать инструкциям. В комплекте с Node.js идёт инструмент npm, или Node Package Manager, — он помогает установить Gulp.

Когда Node.js установится, в терминале нужно выполнить команду:

npm install --global gulp-cli

Установили Gulp CLI (интерфейс командной строки), который позволяет запускать Gulp из терминала

Проверить успешную установку можно с помощью команды:

gulp --version

Перейдём к созданию папки нового проекта и файла package.json:

mkdir my-project
cd my-project
npm init -y

package.json хранит информацию о проекте и его зависимостях

В package.json добавим строку для поддержки модулей:

"type": "module"

Далее установим сам Gulp как зависимость, чтобы связать версию gulp с проектом:

npm install gulp --save-dev

Успешно установили Gulp

Перейдём к настройке Gulp. Начнём с создания файла gulpfile.js — в нём разработчики описывают задачи, которые программа должна выполнять. Файл можно создать в блокноте, а затем сохранить с расширением js. Затем поместим gulpfile.js в корень папки my-project.

Пример простого gulpfile.js:

function defaultTask(cb) {
// укажите код для задачи
cb();
}
exports.default = defaultTask

Проверим, запустится ли задача в терминале с помощью команды:

gulp

Поскольку мы не добавили код задачи, она запустится, но без результата. На этапе подготовки этого достаточно — важно было проверить, что все настроили верно:

Gulp обычно применяют для решения задач, где нужно быстро собирать, тестировать и оптимизировать файлы. Допустим, нужно разработать лендинг для малого бизнеса. В нём используют:

● стили, написанные на Sass;
● современные JavaScript-фичи, которые нужно конвертировать для поддержки старых браузеров (например, let, const, стрелочные функции);
● изображения, которые нужно оптимизировать.

Проект может выглядеть так:

Sass — это улучшенная версия CSS, но браузеры не понимают SCSS, поэтому его нужно превратить в CSS. С помощью Gulp и плагина gulp-sass можно компилировать файлы Sass в CSS и упростить работу с кастомными стилями.

Установим gulp-sass:

Добавим задачу для компиляции Sass в gulpfile.js:

Дальше создадим исходный файл index.scss в папке src/scss:

Выполним команду:
gulp styles

Скомпилированные CSS-файлы появятся в папке dist/css.

Как это работает:

1. Gulp берёт файлы из папки src/scss.
2. Использует плагин gulp-sass, чтобы превратить SCSS в CSS.
3. Сохраняет результат в папку dist/css.

JavaScript может содержать лишние пробелы и комментарии. Чтобы сократить размер файла, нужно его «минифицировать».

Установим gulp-uglify:

Задача в Gulp:

Создадим исходный JavaScript файл src/js/index.js:

Выполним команду:
gulp scripts

Получим минифицированный файл src/js/index.js:

function greet(e){console.log(`Hello, ${e}!`)}greet("World");

Большие изображения замедляют загрузку сайта. Gulp может автоматически сжимать их без потери качества с помощью плагина gulp-imagemin. Установим его:

npm install gulp-imagemin --save-dev

Добавим задачу для обработки изображений в gulpfile.js:

Создадим в папке my-project папку dist/images — туда загрузятся сжатые изображения, и src/images — туда загружаем туда изображения для сжатия и выполняем команду:

gulp images

Сжатые изображения появятся в папке dist/images. Логотип logo.png, который весил 300 Кб, после сжатия может весить 150 Кб.

Установим browser-sync:

npm install browser-sync --save-dev

Добавим задачу для автообновления в gulpfile.js:

В папке dist создадим файл index.html:

Выполним команду:
gulp serve

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

Настроим одну команду, которая будет запускать все четыре задачи:

import { parallel } from "gulp";
task("default", parallel("styles", "scripts", "images", "serve"));

Теперь команда gulp:

1. Преобразует SCSS в CSS.
2. Минифицирует JavaScript.
3. Сжимает изображения.
4. Запускает автообновление HTML-страницы с помощью Browser Sync.