mrKhatter
@mrKhatter
программист

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

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

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

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

Спасибо.
  • Вопрос задан
  • 8641 просмотр
Решения вопроса 2
@Worddoc
Frontend explorer
Понимаю твою проблему. Недавно завершил сборку своего окружения, держи, глядишь понравится:
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.
Ответ написан
Evanre
@Evanre
Front-end developer
На хабре есть одна полезнейшая статья, на которой учился сам.
Статья относительно старая, но именно она мне в свое время "открыла глаза". У меня на полном серьезе после ее прочтения было такое же выражения лица, как у пацана на картинке)) Прошло 2 года но моя сборка фронта принципиально не изменилась. npm, gulp, sass, и т.д. Для сборки чисто фронта использую свой Blank-project, который изначально вышел из этой статьи.

Все зависит от поставленных задач и того, под что вы собираете фронтенд. Я например сейчас в 90% случаев собираю его под WordPress, поэтому вместо html сходу использую php и т.д..
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 9
sompylasar
@sompylasar
Frontend Software Engineer
Зависит от того, собираетесь вы делать сайт (то есть с большим количеством доступного для поисковиков контента, верстки, дизайна, с небольшим повторным использованием компонентов и небольшим интерактивом в целом) или веб-приложение (с большим количеством интерактива, обычно за авторизацией, с большим количеством повторно используемых компонентов).

Для веб-приложений могу порекомендовать 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...
Ответ написан
Комментировать
devellopah
@devellopah
установи 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
Вобщем форкайте, лайкайте, пулл-реквестите(если хотите)
Ответ написан
@Za0r
pop()
Комментировать
IonDen
@IonDen
JavaScript developer. IonDen.com
Начните с этого старенького туторила по Grunt, а там уже откроется дорога к Gulp и Webpack
Ответ написан
VladZen
@VladZen
front-end developer
Ну вопрос не совсем полный: хотелось бы услышать чем вы пользуетесь на проекте, стек технологий. От этого уже отталкиваться. В сети полным полно boilerplate'ов на все случаи жизни. Смотрите доки по конкретному boilerplate'у, на чем он базируется, потом гуглите доки по той системе сборки, на которой базируется конкретный boilerplate. Вырезаете ненужное, подпиливаете напильничком и вуаля: готовая экосистема сборки на проекте. Так что на мой взгляд вам нужно начать с описания проблем, которые должна решать конкретно ваша система, каким фреймворком пользуетесь (и пользуетесь ли?), нужен вам сборщик js или у вас голый html + css. Ирония - это замечательно, но конкретика все-таки бесценна.
Ответ написан
Комментировать
WebDev2030
@WebDev2030
Битриксоид до мозга и костей
Посмотри вот этот сайт там много про это написано. Тебя интересует сборщик проекта gulp или grunt. Я сам использую gulp. Этот парень сделал optimized-gulp-sass пакет я его и использую доработав под себя: сделал поддержку scss, подключил html шаблонизатор и автоаплоад.
Ответ написан
Judixel
@Judixel
Front-end Engineer
Простой pug/scss/es6 стартер кит
Ответ написан
Комментировать
shkuter
@shkuter
Ответ написан
Комментировать
Попробуй TARS: хорошее описание, возможность разбивки на компоненты, выбор используемых технологий, модульность самой системы и возможность подстроить под себя. Для начинающих и, имхо, средних разработчиков фронта - вполне подходящая система. Разумеется имеются свои ограничения, но когда они станут актуальными - уже, имхо, нужно уметь собирать свою систему сборки.

Ну и в качестве основы - методология БЭМ.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы