Что такое QuickBuilder
QuickBuilder — это гибкий и конфигурируемый сборщик для многостраничных проектов вёрстки, основанный на Vite и Vituum. Он использует компонентный (блочный) подход и методологию БЭМ.
В проекте применяется строгий код-гайд, который проверяется с помощью ESLint, Stylelint, Pug-lint и Prettier перед коммитом (с использованием husky, lint-staged) или вручную.
Встроенные препроцессоры:
- HTML-разметка собирается из шаблонов Pug (ранее Jade);
- CSS-стили обрабатываются с помощью препроцессора Sass, синтаксис SCSS (Sassy CSS) + PostCSS плагины;
Также в сборщик интегрирован генератор иконочных SVG-спрайтов.
Цель проекта
Цель сборщика — обеспечить максимально быструю и простую разработку многостраничного проекта.
Зачем?
В моей практике встречаются проекты, которые требуют стандартный набор HTML, CSS, JS, изображений и других дополнительных файлов.
Мои сборки на Gulp и Webpack устарели и не обеспечивают нужной скорости и удобства работы.
Привычное рабочее окружение
Начинать проект с набора хорошо знакомых инструментов всегда приятно.
Разделение на блоки
Как в полном стеке БЭМ: все файлы блока хранятся в его папке. Например, папка src/components/edging/nav содержит все необходимые файлы для работы главной навигации: файл с данными, pug-примеси с разметкой, стили и скрипты.
Автоматическое включение используемых блоков
В сборку попадают только те блоки, которые упомянуты в разметке страницы или указаны в секции alwaysAddBlocks файла builder.config.js. Если блок используется, его разметочные, стилевые и скриптовые файлы будут включены в сборку (при наличии). Если блок больше не используется в разметке, все его компоненты автоматически исключаются из сборки.
Команда быстрого создания болванки компонента (блока)
node new atoms my-component pug jsdeno new atoms my-component pug jsbun new atoms my-component pug jsКоманда создаст директорию src/components/atoms/my-component и в ней SCSS (по умолчанию), Pug и JS файлы со стартовым содержимым. Если не указать в конце команды дополнительные расширения pug и js, соответствующие файлы не будут созданы.
Нормализация стилей из коробки
В проекте используется полный набор sanitize.css, также есть готовый блок page (класс, применяемый к тегу html), который включает базовые стили и «прибитый подвал».
Есть ошибки?
Если вы обнаружили ошибки или опечатки, у вас есть вопросы по руководству, какие-либо аспекты сборщика недостаточно подробно описаны, или вы хотите предложить улучшения — не стесняйтесь, пишите в телегу.
Лицензия и использование
Cвободная лицензия (WTFPL), можно использовать как весь проект, так и его части в коммерческих целях.
Сборщик поставляется как есть, вы берёте все риски использования на себя.
Благодарности
Хочу выразить огромную благодарность Николаю Громову (nicothin) за его , который оказал на меня значительное влияние, и идеи из которого в той или иной форме остаются в моих сборщиках 🤗.
Поддержать автора
Если вам понравился проект — поставьте звезду репозиторию и/или угостите меня кофе с печенькой 🍪.
💡 Совет (не мой)
У каждого, кто занимается вёрсткой, должен быть сборщик для проектов, и... не обязательно свой 😉