С помощью каких инструментов можно верстать в компонентном стиле?
Даже не знаю как правильно спросить. Суть вопроса такова.
Хочется верстать чистые html страницы без лишнего мусора и настройки нового проекта по пол дня.
Сейчас есть папка с блоками(по типу бэм, в одной папке, например header, находится scss и html. И папка с html страницами в которые подключаются html блоки. Потом вся эта хреновина(scss, html, js, файлы foundation фреймворка и т.д.) прогоняется через тучу gulp тасков, подключается, сжимается, переименовывается и т.д. В итоге получился огромный корявый gulpfile который работает не на 100% как бы хотелось.
Далее вёрстку требуется садить, например, на modx.
Какие инструменты могут реально помочь делать качественную компонентную вёрстку, и не будут усложнять процесс(как это делает bem, когда для создания html страницы нужно месяц разбираться в синтаксисе, инструментах, сборщиках и т.д.)?
Angular, react, vue решает такие задачи?
Пока Вы используйте всякие БЭМы, Галпы и прочие велосипеды, я быстрее сверстаю. Дело в навыках и скорости, а не в инструментах. Прокачивайте скилл лучше.
MODX Ambassador России, самозванный БЭМ-евангелист
Вас не спасёт ни MODX, ни БЭМ, ни React'ы с Angular'ами. Если использование инструментов сборки вызывают сложности — не используйте. Целесообразность их использования приходит лишь с опытом понимания того, что вы реально можете автоматизировать, от «магии» толку мало.
Это я вам говорю, как адепт БЭМ-стека (ага, того самого, из Яндекса) и амбассадор MODX.
Это хорошо что Вы специалист в этих вопросах. Подскажите тогда какие инструменты (по вашему мнению) лучше использовать для верстки сайтов (в том числе и простых, 5-7 страниц) и лендингов + modx.
Основные требования:
1) Структура проекта по/по типу БЭМ
2) Быстрый старт нового проекта
3) livereload страницы при изменении блока
4) Возможность в случае необходимости подключить сетку foundation или bootstrap
5) Ну и конечно же сборка scss, js и т.д.
Пробовал BEM project-stub, но он не заработал из-за каких-то ошибок (не стал разбираться).
Ростислав, сейчас я использую именно project-stub (точнее, его модификации, но это всё те же BEMTREE → BEMJSON → BEMHTML, PostCSS, i-bem.js). Прежде мне с головой хватало https://github.com/yeoman/generator-webapp , ведь MODX,в принципе, всё равно, как вы генерируете клиентские HTML + CSS + JS, главное — правильно перенести это в чанки и шаблоны. Шаблонизатор MODX — это его килл-фича и его же «бутылочное горлышко»: очень просто взять любой валидный код и адаптровать его в MODX (займёт 1-7 минут без всякой автоматизации), но придётся вручную подменить шаблонные конструкции (плейсхолдеры MODX). Я пытался сделать свой шаблонизатор, который имел бы аналогичный синтаксис HTML-шаблонизатора хотя бы на уровне чанков, но забил на это. Сейчас кажется, что проще вообще отказаться от родного шаблонизатора MODX и использовать CMF как RESTFul API.
Realetive, я пока застрял на настройке и отладке сборщика gulp чтобы он выполнял все нужные функции. Например можно подключать html блоки в страницы с помощью gulp-file-include, но при таком подключении в phpstorm нельзя быстро перейти к файлу блока (при зажатии ctrl + click ), что уже портит картину.
По поводу modx.
В мечтах хотелось бы настроить gulp сборщик который будет при watch-инге (без запуска gulp build и т.п.) сразу же обрабатывать нужные файлы и складывать в конечную директорию (dist), собранные страницы (для просмотра в процессе верстки) и отдельно блоки (для упрощения натяжки на modx). Потом (каким-то магическим образом через api, cli или что там есть у modx) быстро создать все чанки, шаблоны и т.д. и подключить их к статическим файлам (из папки dist). Таким образом надеюсь можно будет нормально работать с modx из ide со сборщиком. Еще была идея как-то паковать готовую верстку в transport package и таким образом загружать в modx.
На тему быстрой натяжки html на modx ничего толкового не нашел, поэтому приходится придумывать свои (возможно бредовые) идеи.
"BEMTREE → BEMJSON → BEMHTML, PostCSS, i-bem.js" - я так понял лучше научиться работать со всем этим уже сейчас, а не брать от БЭМ только методику именования классов и структуру папок?
Ох… Тут одним комментарием, увы, не ограничиться, потому что есть много разных «если». Скоро MODXpo, кстати, где мы как раз планируем обсуждать и эти вопросы деплоя и скафолдинга: статичные файлы, Gitify.
Про PHPStorm вообще ничего не подскажу — не использую, т. к. БЭМ предлагает бо́лее удобную архитектуру файлов (на мой взгляд), исключающую необходимость «скакать» по вызовам.
По поводу «полный БЭМ-стек vs. БЭМ как именование» — eto kak ispol'zovat' translit i dumat', chto znaesh anglijskiy yazik — все преимущества БЭМ раскрываются в инструментах: там вообще не надо думать об изоляции, инкапсуляции, модульности и других проблемах, которые пытаются решить с помощью CSS-модулей, CSS-in-JS, JSX и прощих Vue. А уровни переопределения — как вишенка на торте: реиспользуемость во всей её красе на 120%.
Realetive, круто, спасибо за помощь. Каждому бы такого наставника)
Самому очень сложно разобраться во всем множестве софта, фреймворков, инструментов и прочего. Или хотя бы понять что подходит для своих проектов.
Vue Cli + Bootsrap Vue
Не будет заморочек с формами, каруселями, табами , модальными окнами и т.д., там целый список компонентов + легко верстается под все устройство за счёт bootsrap grid
Средний
