Принцип работы сборщика Gulp
Gulp
это инструмент для автоматизации часто возникающих при разработке сайта задач: минимизация CSS
и JavaScript
файлов, слияние нескольких файлов в один, преобразование LESS
и SASS
в CSS
, преобразование языка TypeScript
в JavaScript
и тому подобных задач.
Принцип его работы следующий:
- Для системы
Gulp
пишутся задания Gulp
выполняет задания в заданной последовательности
Часто в своих проектах разработчики используют Webpack
, это сборщик модулей для приложений, написанных на JavaScript
. Webpack
из коробки предлагает решения для сборки проектов с использованием уже подготовленных механизмов и настроек. Подробнее об этом инструменте читайте в моей статье.
Модули и задачи
При работе с web-проектом разработчику необходимо выполнять ряд повторяющихся операций:
- проверять HTML-разметку и CSS-правила
- преобразовывать синтаксис CSS-препроцессоров в «чистый» CSS
- проверять JS-код на соответствие требуемым стандартам
- при необходимости объединять несколько файлов (CSS или JS) в один
- минифицировать большие файлы
- проверять в браузере результат, желательно по принципу «live-reload» («живая перезагрузка»)
- формировать итоговую сборку проекта
С использованием Gulp
, выполнение всех этих задач можно организовать с применением специальных модулей, которые распространяются средствами пакетных менеджеров.
Все инструкции по организации работы проекта указываются в файле gulpfile.js
.