Настройка окружения для front end?

Question

[Владимир Хаттер]

Доброго времени суток, друзья!

На каком то сайте видел статью о компонентах, где автор так живо по кусочкам собирает сайт, и мне так обидно стало что я до сих пор верстаю по старинке (нет вы не подумайте, таблицами давно уж не страдаю).
И вот у меня вопрос, как организовать окружение (точнее из чего оно окружение состоит?) Я спрашивал у гугла, гугл мне ответил "node и git ну и БЭМ туда же". Я ему, а дальше то что как из этого суп (сайт) сварить? А он мне загадочно улыбнулся и выдал просьбу "введите-ка капчу".

Увы эта ирония от безысходности.

Спасибо.

Comments

[Hyubert]

гугл все верно сказал, добавте туда gulp или webpack и все получиться + шаблонизатор (например pug) и препроцесор (например sass)

думаю для начала gulp хватит, начните с него.

Answer 1

[Worddoc]

Понимаю твою проблему. Недавно завершил сборку своего окружения, держи, глядишь понравится:
https://github.com/web-worddoc/primary (Старая сборка)

https://github.com/web-worddoc/Boilerplate (Новая сборка)

html разбит на модули с помощью pug(бывший jade), а именно с помощью встроенных "include"
css разбит на модули и собирается на sass
js разбит на модули с помощью require js(очень сильно не дробил, мне удобнее пока крупными кусками), что особенно удобно, если хочется избавиться от спагетти кода

Сборка сама на gulp, стоит через консоль вбить gulp watch и начать писать код.
Надеюсь поможет)

P.S. Для самой сборки проекта в продакшн, прописываешь gulp build.

Comments

[timurkin]

Имхо, установка модулей не через npm в 2017 - моветон.

[Worddoc]

timurkin: лично мне пока рано заморачиваться над такими вещами. Впереди есть много, что нужно изучить, а npm модули подождут.

[Ranwise]

Worddoc у вас там как то странно, папка вроде pug для pug-файлов, но внутри html? Сборка странная...

[Worddoc]

Ranwise: сборку делал под себя, согласен, что назвал папку нелогично, достаточно папку parts переименовать в html и будет все яснее

[Ranwise]

я не про название папки parts, а про то что внутри папки pug лежат html файлы и внутри них тоже html, если внутри писать в формате шаблонизатора jade\pug, нормальный редактор будет ругаться

[Worddoc]

Ranwise: дело в том, что от пользования pug я извлек только импорт html модулей. Нахожу обычное написание html + emmet более удобным. Именно поэтому в дочерних папках html, а не pug.

[Tash1moto]

timurkin: yarn

[timurkin]

Tash1moto: с пятой версией npm`а yarn не особо нужен :)

[Worddoc]

timurkin: говоря о npm вы имели в виду установку зависимостей между модулями?

Answer 2

[Evanre]

На хабре есть одна полезнейшая статья, на которой учился сам.
Статья относительно старая, но именно она мне в свое время "открыла глаза". У меня на полном серьезе после ее прочтения было такое же выражения лица, как у пацана на картинке)) Прошло 2 года но моя сборка фронта принципиально не изменилась. npm, gulp, sass, и т.д. Для сборки чисто фронта использую свой Blank-project, который изначально вышел из этой статьи.

Все зависит от поставленных задач и того, под что вы собираете фронтенд. Я например сейчас в 90% случаев собираю его под WordPress, поэтому вместо html сходу использую php и т.д..

Answer 3

[sompylasar]

Зависит от того, собираетесь вы делать сайт (то есть с большим количеством доступного для поисковиков контента, верстки, дизайна, с небольшим повторным использованием компонентов и небольшим интерактивом в целом) или веб-приложение (с большим количеством интерактива, обычно за авторизацией, с большим количеством повторно используемых компонентов).

Для веб-приложений могу порекомендовать https://github.com/facebookincubator/create-react-app с подключенным https://www.npmjs.com/package/custom-react-scripts... – этот комплект даст быстрый старт в сборку статичного React-приложения с SASS- и CSS-модулями (БЭМ-классы генерируются автоматически, стили принадлежат компонентам). Можно прикрутить его к любому бэкенду, если требуется, но он не даст необходимого для контент-нагруженного сайта: нет генерации полной разметки на сервере. Здесь перечислены некоторые альтернативы: https://github.com/facebookincubator/create-react-...

Не сочтите за саморекламу, но недавно рассказывал о том, как думать компонентами – может, пригодится:
1. https://www.slideshare.net/IvanBabak/think-compone...
2. https://www.slideshare.net/IvanBabak/think-compone...

Answer 4

[Islam Ibakaev]

установи yeoman командой npm install -g yo
установи webapp-generator (сгенерирует дефолтный шаблон для будущего сайта) командой npm install -g webapp-generator
установи gulp-cli и bower командой npm install -g gulp-cli bower

и наконец командаyo webapp чтобы поднять каркас

Вообщем всё это объясняется на самом сайте yeoman.io

UPDATE: поскольку этот вопрос очень многих заинтересовал, я написал простой стартер для вёрстки с pug.
вкратце: под капотом проект, который скаффолдит webapp-generator, только приспособленный для работы с pug, убрана папка тестов, добавлен gulp-uncss(чтобы отрезать неиспользумемые стили фреймворка) и почищен gulpfile.js
Вобщем форкайте, лайкайте, пулл-реквестите(если хотите)

Comments

[Islam Ibakaev]

для тех, кого заинтересовал мой ответ, но работает с pug, я сделал pug-starter на основе проекта, который выдаёт webapp-generator. Я дополнил ответ и ссылка на репо в нём.

Answer 5

[Иван]

webdesign-master.ru/blog/tools/2016-03-09-gulp-beg...

Answer 6

[Денис Инешин]

Начните с этого старенького туторила по Grunt, а там уже откроется дорога к Gulp и Webpack

Comments

[darofonom]

Нафига советовать туторил Грант, чтобы потом прийти к Вебпак через Галп? Посоветуйте ему make. Вот это членовредительство.

[Ranwise]

Grunt в 2017? пока выучит будет 2018

Answer 7

[Владислав]

Ну вопрос не совсем полный: хотелось бы услышать чем вы пользуетесь на проекте, стек технологий. От этого уже отталкиваться. В сети полным полно boilerplate'ов на все случаи жизни. Смотрите доки по конкретному boilerplate'у, на чем он базируется, потом гуглите доки по той системе сборки, на которой базируется конкретный boilerplate. Вырезаете ненужное, подпиливаете напильничком и вуаля: готовая экосистема сборки на проекте. Так что на мой взгляд вам нужно начать с описания проблем, которые должна решать конкретно ваша система, каким фреймворком пользуетесь (и пользуетесь ли?), нужен вам сборщик js или у вас голый html + css. Ирония - это замечательно, но конкретика все-таки бесценна.

Answer 8

[Вячеслав Шевченко]

Посмотри вот этот сайт там много про это написано. Тебя интересует сборщик проекта gulp или grunt. Я сам использую gulp. Этот парень сделал optimized-gulp-sass пакет я его и использую доработав под себя: сделал поддержку scss, подключил html шаблонизатор и автоаплоад.

Comments

[Владимир Соломыкин]

Сделал себе по этому материалу аналогичную сборку, только под less.

Answer 9

[Сергей Некрасов]

Простой pug/scss/es6 стартер кит

Answer 10

[shkuter]

https://github.com/straykov/initium

Answer 11

[Алексей Алексеев]

Попробуй TARS: хорошее описание, возможность разбивки на компоненты, выбор используемых технологий, модульность самой системы и возможность подстроить под себя. Для начинающих и, имхо, средних разработчиков фронта - вполне подходящая система. Разумеется имеются свои ограничения, но когда они станут актуальными - уже, имхо, нужно уметь собирать свою систему сборки.

Ну и в качестве основы - методология БЭМ.