Автоматизация рутинной работы с помощью GULP

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

Для работы понадобится, node.js, ее можно скачать с оф. сайта для своей платформы.

1. Скачиваем  шаблон с GitHub, в папку своего проекта
2. Переходим в папку с проектом и устанавливаем, командой

После того как все зависимости буду установлены, можно чуть чуть настроить для удобства свою IDE или редактор, я работаю с PHP Storm покажу на примере его.
Для того что бы быстро запускать галп, без команд, проделаем следующее:


1. Edit confifurations
2. Любое понятное имя
3. Путь к конфигу проекта
4. Таск из выпадающего списка — default

Теперь нажав на зеленый треугольник, мы можем запускать проект.

Сам шаблон имеет 2 папки:
Build — папка в которой находится проект готовый к продакшену
Dev —  папка с исходниками

Структура проекта BUILD:

CSS на выходе разделены по логике код разработчика и библиотеки, и формируется все в 2 вариантах в сжатом и не сжатом.
JS аналогично CSS
Все кроме html — assets, чтобы скомпоновать файлы проекта в одном месте, когда те будут переносится в CMS/CMF

Структура проекта DEV:



СSS — папка заглушка, просто нужна!
fonts — передается в билд так как есть
IMG — тут самый огонь, галп на ходу сжимает содержимое и передает в билд, при чем кеширует, что бы не пережимать одно и тоже по нескольку раз. Причем картинки сжимаются на уровне сервисов: tinypng.com и imagecompressor.com
JS/main.js — скрипты разработчика
JS/libs.js — скрипты, подключаемых библиотек

В зависимости от проекта подключается, любы и отключаются путем комментирования строк, если нужно подключить стороннюю либы, просто дописываем код ниже, он автоматически подхватится.
SCSS синтаксис, препроцессора SASS, в этой папке лежат куски стилей разделенные на сущности.
Сущности помещаются в папку PART, вы можете добавить свою. и потом подключить ее в основной файл main.scss
Вот так:

Это очень удобно, когда код разделен семантически, и мы знаем что в var лежат переменные а в media — медиа запросы, когда адаптивим шаблон.

Содержимое файла libs.scss

Это далеко не весь перечень, что можно отдельно подключить в файл библиотеки, от bootstrap и foundation можно посмотреть в папке node_modules, она находится на одном уровне с папками DEV и BUILD.

Дополнительный стили библиотек, можно напрямую добавлять в файл libs.scss

Папка CHUNK
Содержит повторяющиеся участки кода html на разных страницах, например подвал или меню, когда у нашего проекта будет несколько страниц удобнее править код в одном месте, чем во всех файлах

Подключается такой кусок кода просто:

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

Используемые материалы при написании статьи:
https://gulpjs.com/plugins/

Leave a Reply

Your email address will not be published.