Как быстро создать блок по БЭМ?

Question

[hopman]

Использую gulp и бэм но папки для блоков приходится вручную создавать и подключать. Какое есть решени для того чтобы быстро создать блок с css и js файлом и папкой под изображения.
Так же было бы неплохо если опишите как можно создавать готовые блоки и подключать командой или табом типо как снипет

Answer 1

[Realetive]

Всё есть: https://github.com/bem-tools/bem-tools-create:

bem create my-block.{js,css,pug} -l components

создаст my-block.js, my-block.css и my-block.pug в каталоге ./components/my-block.

А

bem create my-block__{header,content,footer}.{js,css,pug} -l components

нагенерирует

./components
  my-block__content/
    my-block__content.js
    my-block__content.css
    my-block__content.pug
  my-block__footer/
    my-block__footer.js
    my-block__footer.css
    my-block__footer.pug
  my-block__header/
    my-block__header.js
    my-block__header.css
    my-block__header.pug

Шаблоны, естесвенно, можно создавать под любые языки.

Comments

[Realetive]

И что? Да хоть Grunt. Вы понимаете, что это инструменты из разных плоскостей? CSS для вас тоже Gulp пишет?

Answer 2

[Олег]

Использую gulp и бэм но папки для блоков приходится вручную создавать и подключать. Какое есть решени для того чтобы быстро создать блок с css и js файлом и папкой под изображения.

Можно написать NPM скрипт, типа npm run add block, а еще можно автоматически создавать блок в зависимости от HTML разметки. Можете глянуть эту сборку и выдернуть себе нужный функционал.