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

Сторонние пакеты Gulp

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

И здесь нет противоречий — Gulp действительно даёт только платформу, «ядро», вокруг которого мы можем выстраивать различные манипуляции с данными.

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

Установка сторонних плагинов

Сторонние плагины для Gulp — это знакомые нам npm-пакеты. Поэтому их установка ничем не отличается. Всё, что требуется — установить пакет и подключить его в начале созданного gulpfile.js.

Для поиска пакетов удобно использовать сайт npmjs.com. Например, чтобы найти обработчик для SASS файлов можно, в поиске, указать два ключевых слова:

  • gulp
  • sass

и в поиске найти самый популярный пакет. Почему именно самый популярный? Скорее всего, именно для таких пакетов есть подробная документация и исправлены основные критические ошибки. Так же важно следить за тем, когда в последний раз обновлялся пакет. Да, есть пакеты, которые исправно работают и не требуют обновления, но это скорее исключение из правил. Зачастую частые обновления говорят о том, что разработчики следят за обратной связью и исправляют критические моменты.

Поиск пакета на npmjs.com


Важно: помимо плагина для Gulp в большинстве случаев требуется и сам интерпретатор/компилятор. Например, для обработки SASS нужен не только специальный пакет для Gulp, но и пакет SASS


Sass

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

  • sass — основной компилятор SASS
  • gulp-sass — плагин для Gulp

Установить всё можно одной командой:

npm install sass gulp-sass --save-dev

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

const { src, dest } = require('gulp');
const sass = require('gulp-sass')(require('sass'));

const buildSass = () => {
  console.log('Компиляция SASS');

  return src('dist/sass/*.scss')
    .pipe(sass())
    .pipe(dest('build/styles/'));
}

exports.build = buildSass;

Компиляция SASS в Gulp

Pug

Обработать Pug в Gulp можно с помощью популярного плагина gulp-pug. Заметили, что самые популярные плагины даже называются похожим образом? :)

Его установка и использование в точности повторяет подход, который использовался при использовании плагина gulp-sass. Для использования необходимо установить пакет pug и gulp-pug. Это можно сделать в одну строку:

npm install pug gulp-pug --save-dev

Так же обработка файлов происходит по уже знакомой нам структуре: открытие файла, обработка, запись файла. Объединим с помощью функции parallel функции в рамках одной задачи build:

const { src, dest, parallel } = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const pug = require('gulp-pug');

const buildSass = () => {
  console.log('Компиляция SASS');

  return src('dist/sass/*.scss')
    .pipe(sass())
    .pipe(dest('build/styles/'));
}

const buildPug = () => {
  console.log('Компиляция Pug');

  return src('dist/pages/*.pug')
    .pipe(pug())
    .pipe(dest('build/'));
}

exports.build = parallel(buildSass, buildPug);

Компиляция SASS в Pug


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


Browser Sync

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

Именно благодаря browser-sync возможно развернуть условное рабочее окружение, где вам не нужно беспокоиться о компиляции файлов и обновлении браузера. Всё будет происходить «на лету».

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

npm install browser-sync --save-dev

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

const browserSync = require('browser-sync').create();

const browserSyncJob = () => {
  browserSync.init({
    server: "build/"
  });
};

exports.server = browserSyncJob;

Теперь, при запуске задачи server будет запущен специальный локальный сервер, корнем которого станет директория build/ нашего проекта. После запуска вы можете перейти по адресу, указанному в поле Local или External.

Запуск сервера Browser-sync

У пакета browser-sync есть ещё один полезный метод .stream(), который позволяет автоматически обратиться к локальному серверу и перезагрузить его. Эта операция, в большинстве случаев, добавляется в самый конец функции внутри знакомого нам pipe(). Например, дополним пример с обработкой SASS и Pug, добавив в конец каждой функции строку .pipe(browserSync.stream()):

const { src, dest, parallel } = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const pug = require('gulp-pug');
const browserSync = require('browser-sync').create();

const browserSyncJob = () => {
  browserSync.init({
    server: "build/"
  });
};

const buildSass = () => {
  console.log('Компиляция SASS');

  return src('dist/sass/*.scss')
    .pipe(sass())
    .pipe(dest('build/styles/'))
    .pipe(browserSync.stream());
}

const buildPug = () => {
  console.log('Компиляция Pug');

  return src('dist/pages/*.pug')
    .pipe(pug())
    .pipe(dest('build/'))
    .pipe(browserSync.stream());
}

exports.server = browserSyncJob;
exports.build = parallel(buildSass, buildPug);

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

const browserSyncJob = () => {
  browserSync.init({
    server: "build/"
  });

  watch('dist/sass/*.scss', buildSass);
  watch('dist/pages/*.pug', buildPug);
};

Hot Reload Gulp


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

Доработайте созданный в этом уроке скрипт. Для этого создайте задачу development, которая работа по следующему принципу:

  • Запускается компиляция всех нужных файлов SASS и Pug
  • После этого запускается сервер, который будет отслеживать уже новые изменения

В общем случае это станет компиляцией задач build и server из примера


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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