Gulp: основы по созданию собственного сборщика проектов

Дневник разработчика
Это первая статья по теме разработки собственого сборщика на Gulp. В первой статье я рассказываю о базовых понятиях, которые важно знать перед началом настройки сборщика gulp. По итогу прочтения этой статьи вы сможете понять как работает сборщик gulp и почему он нужен всем кто верстает сайты. А еще вы сможете установить все необходимые программы и напишите свою первую программу для GULP и проверите её на работоспособность.

Что такое Gulp

GULP – это менеджер задач. Чаще всего его называют Таск-менеджер/таск-раннер. Благодаря gulp мы можем автоматизировать широкий спектр повторяющихся задач, которые являются неотъемлемой частью процесса создания сайта.

При использовании грамотно настроенного gulp, веб-разработчик может существенно сократить время разработки сайта, а также упростить большую часть рабочих процессов.

Список популярных задач, которые решает gulp:

  • Создание локального веб-сервера
  • Автоматической перезагрузка страниц в браузере
  • Автоматическое обновление страницы в браузере при каждом сохранении файлов проекта.
  • Возможность использования библиотек и фреймворков, и CSS-препроцессоров
  • Минификация кода
  • Переименование файлов
  • Объединение файлов проекта
  • Управление файлами и папками
  • Работа с изображениями — сжатие, создание спрайтов,
  • Выгрузка файлов на внешний сервер проекта по FTP, Git и т.д.
  • Подключение и использование в проекте утилит, программ и плагинов из библиотеки

Весь комплекс задач, выполняемых gulp принято называть сборкой проекта. При этом под проектом подразумевается папка с разрабатываемым сайтом или мобильным приложением.

Именно поэтому чаще всего gulp называют «Сборщик». Часто в диалогах между двумя веб-разработчиками можно услышать такие фразы:

«Скинь мне свой проект со сборщиком» — тут имеется ввиду что нужно отправить файлы проекта вместе с исходниками и gulp-файлами.
«Ты в этом проекте в сборщике
SCSS используешь?» — тут коллега интересуется какой css-препроцессор используется в конкретном проекте.

«У тебя обновлённый сборщик? На Gulp или что-то другое?» — коллега переживает о том, актуальные ли версии пакетов (расширений) используются в gulp.

Условно файлы любого можно разделить: исходники и итоговые файлы.

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

Перед началом работы

На вашем компьютере должен быть установлен node.js https://nodejs.org/ru/

  Node.js – это среда разработки. Интерпретатор языка JavaScript. Используется для запуска и полноценной работы основного файла gulpfile.js — содержит в себе список задач, для сборки проекта. А еще node.js содержит в себе пакетный менеджер NPM, благодаря которому мы можем добавлять в наш сборщик gulp дополнительные расширения/плагины.

Что такое NPM – пакетный менеджер. Позволяет скачивать пакеты с сервера npm https://www.npmjs.com/   на ваш компьютер, для дальнейшего их использования в работе над проектами.

Список команд

  • Команды выполняются в консоли. Консоль открывается в рабочей папке проекта.
  • node -v проверка версии установленного node.js
  • npm -v проверка версии установленного npm
  • npm install --global gulp-cli – глобальная установка интерфейса gulp для командной строки (необходим, для работы с командами gulp из консоли). Ставится один раз на рабочий ПК. Устанавливается ГЛОБАЛЬНО на уровне системы. После его установки мы сможем запускать команды gulp из любой папки на ПК.
  • gulp -v проверка версии установленного CLI gulp

Важные рекомендации при создании папки проекта

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

Название папки нужно писать английскими буквами. Кириллицу использовать нельзя! Это делает путь к файлам проекта нечитабельными для node.js.

Инициализация проекта

Если вы создаёте проект с нуля, то перед тем, как работать над страничками и настройкой сборки, требуется инициализировать проект. Для этого достаточно создать основной файл package.json

Этот файл создаётся при помощи команды в консоли: npm init

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

Кстати, что бы не тратить время на параметры можете ввести команду инициализации проекта с дополнительной приставкой/флагом: npm init  - - yes

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

Вопросы, которые спрашивает система, при инициализации проекта:

  • Название проекта
  • Начальная версия проекта (оставим по умолчанию)
  • Версия проекта
  • Краткое описание проекта
  • entry point, test command, git repository, keywords оставим по-умолчанию.
  • Имя автора
  • license оставляем по-умолчанию и вводим yes

Готово!

Gulp: основы по созданию собственного сборщика проектов

Что произошло после инициализации проекта

В итоге у вас в проектной папке появится новый файл

Gulp: основы по созданию собственного сборщика проектов

В котором будут прописаны указанные вами параметры инициализированного проекта

Gulp: основы по созданию собственного сборщика проектов

Устанавливаем gulp в папку проекта

npm install gulp –save-dev

Что произошло после установки gulp

После того как установка завершится в проекте появится новая папка node_modules.

В этой папке находятся все скаченные пакеты библиотек, необходимых для работы сборщика. Файлы самого gulp так же находятся в этой папке.

Не редактируйте папке и не трогайте в ней ничего, если не понимаете зачем это там!

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

Произошли изменения в файле package.json – появился раздел dependencies

В котором добавился установленный нами gulp

Gulp: основы по созданию собственного сборщика проектов

Появился новый файл package-lock.json в него записаны все установленные пакеты/библиотеки, которые появились в нашем проекте и необходимы для корректной работы нашего сборщика gulp.

Важное уточнение

Имейте ввиду, что при копировании и переносе сборщика в другую папку или на другой компьютер, папку node_modules переносить не нужно. Она очень большая. В ней куча мелких файлов.

Для правильного переноса проекта достаточно скопировать файлы сборщика, в том числе и вспомогательный файл package-lock.json в котором описаны все необходимые библиотеки.

Gulp: основы по созданию собственного сборщика проектов

После переноса сборщика вы выполняете инициализацию проекта и все необходимые зависимости устанавливаются АВТОМАТИЧЕСКИ, согласно параметров в файле package-lock.json

Создаём первую задачу для сборщика

Перед тем как программировать задачи для нашего сборщика, нужно создать специальный файлик, в котором мы и будем работать — gulpfile.js

Описание задач в этом файле условно делится на два шага:

Загружаем модуль, необходимый для работы нашей программы. В нашем случае это модуль gulp. Для загрузки модуля в наш сборщик используем конструкцию: const gulp = require('gulp');

Объявляем переменную и присваиваем ей результат работы команды require, которая в свою очередь подключает выбранный нами модуль.

Команда require подключает один модуль к другому.

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

Важно помнить, что в конце программы мы должны вернуть результат работы функции. Это делаем при помощи дополнительной функции callback — функция, которая будет вызвана по завершению программы.

При успешном завершении она вернёт нам done, и мы увидим, что работа программы успешно завершилась.

Gulp: основы по созданию собственного сборщика проектов
Gulp: основы по созданию собственного сборщика проектов
Юрий Ронин