Автоматизированный сБорщик статических файлов для веб. Под капотом, всем этим безобразием рулит Gulp. Статические файлы собираются из исходников на pug, scss и ванильного JS (в данный момент без CoffeeScript, TypeScript и прочих плюшек, которые, возможно, появятся в будущем).
Название проекта технично скомунижжено отсюда. Граблей много не бывает, можно и свои собственные наколхозить. Оригинальный проект прилично давно не обновлялся. Поэтому решено было сварить свой Борщик. Может еще кому придется по вкусу.
Подразумевается полное или частичное соответствие методологии БЭМ:
Скрипты сБорщика — это совокупность из основного скрипта gulpfile.js
и содержимое js-файлов в папке /.build
.
На данный момент реализована сборка html/css/js, а также минификация изображений в форматах jpg, png, gif и svg. Все это приправлено вотчером, автоматически помешивающим страницу при изменении ингредиентов.
- Каждый блок является атомарным, и располагается в одноименной подпапке внутри директории
b_
, содержащей прочие блоки. - Блок собирается из
.pug|.scss|.js
файлов. Имена этих файлов могут быть произвольными, но лучше всего давать им одинаковые имена, совпадающие с именем блока. Например, блокmyBlock
должен находиться в папке/src/b_/myBlock
, и быть описан в файлахmyBlock{.pug|.scss|.js}
. Кроме того, имя класса у данного блока должно совпадать с наименованием блока:.myBlock
— это упрощает сопровождение и навигацию по проекту. - Файлы
*.pug
шаблонов страниц находятся в папке/src
(например,/src/index.pug
или/src/home.pug
). - Блоки
.pug
подключаются в файлы шаблонов вручную при помощи директивыinclude
в нужное место шаблон(а/ов). - Допускается вкладывание одного блока в другой. Но нужно быть осторожнее с такой вложенностью, т.к. можно столкнуться с проблемой циклической вложенности.
- Если есть необходимость временно или полностью исключить включение файлов
.scss|.js
в итоговую сборку, можно добавить символ подчеркивания в начало имени файлов, например файл_myBlock.scss
не будет включен в сборку. - К основному файлу стилей
styles.scss
подмешиваются дополнительные стили (при помощи директивы@import
), миксины и/или библиотеки, расположенные в папкеsrc/.scss/
. По умолчанию, предусмотрен всего один общий файл стилей на все случаи жизни. В него включаются все стили блоков, кроме исключенных (см.п. 6). - Файлы JavaScript просто склеиваются в один итоговый файл из .js-кусочков, расположенных в папках блоков, кроме исключенных (см.п. 6).
Тестовая сборка (в папке /test
) проекта осуществляется простым запуском команды gulp
в консоли. Задача по умолчанию стартует броузер и автоматическую перезагрузку тестовой сборки.
- Страницы, собранные из шаблонов .pug (
/src/*.pug
) с включенными внутрь блоками (/src/b_/**/*.pug
), собираются в одноименные html-файлы (/test/*.html
). - Таблицы стилей собираются из .scss-файлов (
/src/b_/**/*.scss
), включаемых в основной исходник стилей (по умолчанию —/src/styles.scss
), с подмешиванием миксинов и разных библиотек из/src/.scss/*.scss
, предназначенных для многократного использования (в следующих версиях планируется добавить сюда немного вкусняшек). - Скрипты пока что попросту конкатенируются в результирующий js-файл (
/test/js/script.js
).
gulp serve
,gulp
— Дефолтный таск. Варит все файлы, и стартует броузер с автопомешиванием.gulp pug
— Сборка pug-файлов в htmlgulp scss
— Сборка стилейgulp js
— Сборка скриптовgulp minify
— Сушка картинокgulp clean
— Моем посуду (удаляется содержимое папки/test
)gulp copy
— Копируем папку со шрифтами, и файлы из корневой папки/src
исходников в папку/test
Финальная сборка проекта (в папке /dist
) в данный момент еще не реализована.