Всем привет ! Я только недавно начал глубже погружаться в БЭМ-методологию (до этого использовал только БЭМ-нейминг). Мне очень понравилась эта концепция и хотелось бы полностью внедрить ее в свой воркфлоу. Однако, т.к. у меня недостаточно опыта и я довольно поверхностно знаю JavaScript, мне не хватает знаний чтобы запилить свой "велосипед" для Gulp4 и/или Webpack4. А готовые решения вроде bem-tools, enb и других специфических решений мне не подходят из-за своей перегруженности и как мне кажется сложности. Я не говорю что это так и есть, это справедливо и субъективно лично для меня.

Хотелось бы иметь возможность подтягивать данные в pug-шаблоны из data.json-файла или аналогичного data.js, а также декларативно определять структуру БЭМ-боков с учетом соответствующих зависимостей.

Если совсем коротко, то нужно вот из такой структуры:

app
│   ├── assets
│   │   ├── fonts
│   │   ├── images
│   │   └── libs
│   ├── blocks
│   │   ├── common.blocks
│   │   │   ├── footer
│   │   │   └── header
│   │   │       ├── header.js
│   │   │       ├── header.pug
│   │   │       ├── header.scss
│   │   │       ├── img
│   │   │       └── nav-menu
│   │   │           ├── img
│   │   │           │   └── background.jpg
│   │   │           ├── nav-menu.js
│   │   │           ├── nav-menu.pug
│   │   │           └── nav-menu.scss
│   │   ├── desktop.blocks
│   │   └── touch.blocks
│   ├── pages
│   │   ├── about
│   │   │   ├── about.js
│   │   │   ├── about.pug
│   │   │   └── about.scss
│   │   ├── gallery
│   │   │   ├── gallery.js
│   │   │   ├── gallery.pug
│   │   │   └── gallery.scss
│   │   └── home
│   │       ├── home.js
│   │       ├── home.pug
│   │       └── home.scss
│   └── templates
│       ├── custom.pug
│       └── default.pug

получить на выходе вот такую:

.
├── about.html
├── assets
│   ├── fonts
│   │   ├── font1
│   │   └── font2
│   ├── images
│   │   └── sprites
│   │       ├── png
│   │       └── svg
│   ├── scripts
│   │   ├── about.min.js
│   │   ├── common.min.js
│   │   ├── gallery.min.js
│   │   └── home.min.js
│   └── styles
│       ├── about.min.css
│       ├── common.min.css
│       ├── gallery.min.css
│       └── home.min.css
├── gallery.html
└── home.html

Мне не принципиально на чем делать сборку, будь-то Gulp, Webpack или их совместное использование, главное получить ожидаемый и предсказуемый результат. Надеюсь, я доступно изъяснялся и смог донести свою мысль. Какие будут мысли на этот счет ? :) Заранее всем признателен.

з.ы. Естественно, прежде чем оставлять свой вопрос здесь я шерстил по сети в поисках готовых решений, однако в одних случаях разобраться мешало отсутствие документации, в других - неактуальность самой информации, в иных - не хватало моей профессиональной компетенции. з.з.ы. В Ютубе я натыкался на пару видео, но если честно, изложенная там информация расчитана далеко не на новичков. Пользуясь случаем, хочу попросить ответственных ребят из Яндекса обновить учебные видеоматериалы и записать воркшопы по сборке БЭМ-проектов на Gulp4 и Webpack4 с учетом реалий 2019 года. Я думаю, не одна сотня людей ждет подобного материала. Всем спасибо.