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

Gulpfile Gulp

На протяжении всего курса мы будет работать с файлом gulpfile.js. Вспомним структуру проекта:

layout-project/
├── build/
├── dist/
│   ├── sass/
│   │   └── app.scss
│   ├── pages/
│   │   ├── index.pug
│   │   ├── sections/
│   │   │   ├── head.pug
│   │   │   └── footer.pug
├── gulpfile.js
├── package.json
└── node_modules/

Обратите внимание, что файл находится в директории layout-project/, а не dist/. Такие вещи очень важны, так как расположение файла влияет на то, как мы будем указывать пути. Если вы видите, что сборка не идёт, либо что-то идёт неправильно, то, в первую очередь, проверьте месторасположение файла gulpfile.js и путей, которые там прописаны. С такой проблемой можно встретиться, если вы скопировали файл из другого проекта.

Весь файл gulpfile.js можно условно разделить на три части:

  • Подключение необходимых компонентов для работы
  • Функции-задачи, которые определяют операции
  • Экспорт задач по умолчанию

Не стоит акцентироваться на этом, так как эти операции не расположить в другом порядке :)


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


Создадим первую задачу на Gulp:

const firstTask = (done) => {
  console.log('My First Hexlet Task');

  done();
};

exports.default = firstTask;

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


Название задачи выбираете вы сами. Здесь нет каких-то ограничений, но старайтесь называть задачи понятно. Если в задаче происходит работа с CSS, то не надо называть задачу WindowsOmegaTask. Подробнее про именование можно прочитать в нашем блоге:


Внутри задачи вы можете производить различные действия, не обязательно связанные с преобразованием. Это могут быть и просто информативные задачи, как в примере выше. В этой задаче есть только вывод console.log(). Отсутствие ограничений позволяет разбивать большие функции и делать код удобным для чтения.

Чтобы Gulp мог запустить задачу, её необходимо экспортировать:

exports.default = firstTask;

В этом примере экспорт идёт с именем default. И действительно, это задача по умолчанию, которую Gulp выполняет если запустить команду gulp в директории с проектом.

Запуск задачи по умолчанию в Gulp

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

  • Файл gulpfile.js из которого выполняется задача
  • Имя выполняемой задачи. В примере это default
  • Время выполнение задачи

Экспорт задач

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

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

const sassCompile = (done) => {
  console.log('Compile SASS to CSS');

  done();
};

const pugCompile = (done) => {
  console.log('Compile Pug to HTML');

  done();
};

const imagesOptimize = (done) => {
  console.log('Optimize Images');

  done();
};

exports.default = parallel(sassCompile, pugCompile, imagesOptimize);
exports.layoutCompile = parallel(sassCompile, pugCompile);
exports.assetsOptimize = imagesOptimize;

В этом примере добавилось несколько новых вещей. Рассмотрим их подробнее

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

Здесь происходит подключение функции parallel() из пакета Gulp. Эта функция позволяет объединять несколько функций в одну задачу. Именно функция parallel() используется при экспорте задач в этом примере.

exports.default = parallel(sassCompile, pugCompile, imagesOptimize);
exports.layoutCompile = parallel(sassCompile, pugCompile);
exports.assetsOptimize = imagesOptimize;

В этом примере экспортируются три задачи:

  • default — задача по умолчанию, которая выполняет три функции: sassCompile(), pugCompile() и imagesOptimize(). Для запуска задачи достаточно просто запустить gulp

Запуск задачи по умолчанию Gulp

  • layoutCompile — задача, вызывающая только функции, связанные с компиляцией файлов вёрстки. Для запуска задачи используется команда gulp layoutCompile

Запуск задачи Gulp

  • assetsOptimize — задача, вызывающая функцию imagesOptimize(). Для запуска задачи используется команда gulp assetsOptimize

Запуск задачи Gulp


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

Создайте три функции и экспортируйте их, используя функцию parallel(). Создайте несколько различных экспортов и потренируйтесь с вызовом задач с помощью консоли


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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