Организация pug?

Question

[Вадим Сомов]

Всем привет, решил попробовать pug. С синтаксисом вроде все понятно, но мне не понятно именно организация файлов, дробление, подключение миксинов и инклюдов и тд. Есть ли статья по эти штуковинам или хороший пример?
И как вы вообще в своих проектах организуете работу с pug'ом?

Answer 1

[alvvi]

Не претендую на правильность, но для себя удобным счел такой вариант:

клик

Каждый компонент - pug-миксин. Миксины могут быть вложенными, например:

клик

+ делаем layout.pug, от которого @extend-им все страницы, инклюдим нужные компоненты и в конце вызываем миксины

вот так

В целом получаются вполне себе реюзабельные блоки вместе с разметкой, логикой стилями и контентом. Такое очень легко натягивать на Express или просто перекидывать с проекта в проект.

Comments

[Иван]

ничего себе..а я просто синтаксис юзаю и разбиваю на блоки :D

прочитал,и ничего не понял ,что и как работает)

[Hyubert]

Очень хорошая структура, особено если использовать БЭМ, если б вы еще gulpfile скинули, все бы были очень благодарни Вам, особено я.

[alvvi]

Hyubert: я бы скинул, но не пользуюсь Gulp'ом, т.к. хватает Webpack'a.
Могу показать конфиг, но в нем нет ничего необычного касательно именно Pug'a.
Использую pug-html-loader и html-loader.
На каждую страницу - новый инстанс HtmlWebpackPlugin'a, генерирую в цикле, если приложение/сайт многостраничен.

[Hyubert]

Илья Ростопка: нашел Ваш гитхаб в профиле и сам все увидел, спасибо.

Answer 2

[Froggyweb]

Нет, дальше как тебе надо, дроби как хочешь организовывай как хочешь Смысл какого-то руководства?

Answer 3

[zooks]

Можно создать папку chunks и сложить в нее все header.pug, footer.pug и т.п.