Как организовать проект для сборки?

Question

[Skrolea]

Я как бы сильно отстал от жизни. Хочется верстать страницу по компонентам. Т.е. сделать отдельную папку components, там по папкам core, buttons, cards, navbar, типа так

В папке buttons держать button__primary.scss, button__primary--hover.scss и там же хотелось бы держать html. Типа button__primary.html, button__primary--hover.html
Что сейчас используют для сборки подобного? Ну т.е. с scss понятно. Берётся какой-нибудь gulp-sass и он куда то это переносит, потом другим плагином подключает. А что по поводу WebPack или SystemJS? Можно ли с их помощью написать (точней подключить) как-то сразу компоненты?Главным образом чанки html. Или это сразу превратится в angular? Можно ли для SystemJS, например, написать какой-нибудь скрипт, который увидит, ну, например, как в Angular2

templateUrl: 'about.component.html',
  styleUrls: ['about.component.css']

, и вставил в нужное место на мою страницу (ну где я укажу какой-нибудь селектор) или для этого нужно будет писать как-то свой template parser. Т.е. хочется какой-нибудь сборщик проектов. Или лучше всё равно сделать кучу gulp?

Answer 1

[Никита Кит]

"button__primary--hover.html" лол, мэн, никто так файлы не называет. Это БЭМ-классификация разметки, во-первых.
Во-вторых, на html уже никто нормальные проекты не пишет.
Вот тебе хорошие ссылки.
бац https://habrahabr.ru/post/246349/
бац yeoman.io
бац https://github.com/larsonjj/generator-yeogurt (ну или просто npm i generator-yeogurt -g)

Comments

[Skrolea]

Ну по аналогии с БЭМ по css, я скопировал в пример и названия файлов. А чем yeoman мне поможет? Ну сгенерю я структуру с его помощью одной командой, так у меня вопрос, а что внутри то будет. Как и чем собирать. Ну т.е. yeoman это хорошо, но что внутри то у него будет? Спасибо

[Skrolea]

А, yeogurt. Посмотрю

[Никита Кит]

Skrolea: Внутри будет генератор. Какой применишь такой и будет. Хочешь - yeogurt разверни - он добавит тебе jade или haml на твой выбор, тестировщики скриптов, stylus, sass, less тоже на твой выбор. Сам соберёт тебе конфиги тасков галпа с браузерсинком, с веткой теста, с веткой диста, ещё и git-репу сконфижит если тебе надо. gitignore в любом случае тебе даёт + readme.md в каждой папке (если именно о йогурте говорить). Я уже около 3х месяцев во всех студийных проектах юзаю yeogurt. И знаешь, даже webpack сосёт и нервно курит в стороночке. А структуру внутри ты выбираешь сам. Вот я, к примеру, мою типичную структуру проекта вложу на мой ответ сверху. Как по мне так удобней некуда.

[metaf]

С чего это вдруг на html нормальные проекты никто не пишет? А если мне не нравится jade, мне больше не верстать?))

[Никита Кит]

metaf: нет, юзать haml или nunchucks или handlebars)))

[Никита Кит]

metaf: Я посмотрю как ты будешь мучаться, ошибившись в разметке хедера на 20ти или 40ка html-страницах без использования шаблонизатора (Хотя и без ошибок - достаточно одной маленькой правки заказчика).
Ну кто-то только сам оступившись о грабли делает выводы.

[metaf]

Никита Кит: ну я использую handlebars, просто handlebars это как бы "чистый html". А не пре-, пост- и еще черт знает какой процессор). Удивила категоричность просто.

[metaf]

Никита Кит: спасибо что поделился своими проблемами и граблями, кстати, мне это очень нужно ;)

[Skrolea]

Ну так да. Генератор хороший. Придется учить Jade) сгенерит модуль header не знаю как к нему стили прописать) но, в любом случае спасибо

[Никита Кит]

Skrolea: header.jade > .header и точно так же начинаешь scss. И лооол что тут учить. Сел и начал юзать. Тот же html, только с синтаксическим сахаром и атрибутами в скобках)))) Скидую наглядный пример типичного jade-хедера (кстати уже pug, а не jade, но блин сила привычки)
https://pp.vk.me/c837320/v837320368/6ff4/D94gw1P8z...

[Никита Кит]

Skrolea: да кстати, чуть не забыл. Стили с модулей не забывай в main.scss импортировать (@import). Наверно поэтому и не подключаются у тебя модульные стили. Ещё правда есть варик - эдитнуть gulpfile с таском парсинга стилей и указать ему на папку с модулями. Но мне вечно лень(((

[Skrolea]

А вот это да, было очень ценная инфа)))

[Falken_D]

если я начинаю изучать front end языки ну и что то пробывать писать то мне лучше сразу начать
"юзать haml или nunchucks или handlebars))) ", или пока не стоит? спс за ответ

[Никита Кит]

Falken_D: нет, не стоит. С этими тремя шаблонизаторами у меня вечно был геморрой. Особенно когда экстендил. Начни с jade. Точнее уже pug (недавно переименовали). Я вот когда начинал учиться, начал писать сразу на sass. Разворачивать gulp, палить что он мне сконфигурировал, ковыряться в зависимостях. Многие будут говорить тебе "не беги наперёд паровоза" - всё х..ня - беги. Сначала ты не все функции этого паровоза будешь знать и использовать, но со временем начнёшь и очень даже привыкнешь к нему.
А если ты привык к инструментам, значит ты не будешь сидеть и тупить час а то и больше, думая почему у тебя из папки modules стили не подключаются, если gulp ищет их в styles - как было с челом в комментах повыше))).
https://pugjs.org/api/getting-started.html - вот кратенький туториал. Если ещё не умеешь сам конфижить такси галпа, заюзай инструкцию к генератору - я кидал её в ответе выше.

[Andrey M.]

И чтобы тебя это все не расслабило, не забудь прочекать проект с помощью frontendchecklist.io. У меня их сайт не запускается, вставил картинку.

Answer 2

[Falken_D]

"на html уже никто нормальные проекты не пишет" сори но можно объяснить?

Comments

[Никита Кит]

Читай комменты поста выше, всё поймёшь)