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

Question

[freeman0204]

Начал изучать сборку фронтенда, gulp. У меня есть рабочая папка где все исходники и папка которая идет в продакшн. Меня интересуют имена файлов и папок и их расположение в папках.
У меня весь css соединяется в один файл так же и html и js. В каждом сайте есть блоки, буду писать каждый блок в отдельном файле, как посоветуете назвать их? У кого какие есть шаблонные заготовки? Кто как организовывает свой проект?

Answer 1

[Никита Кит]

всё очень просто. Есть такая фишка - называется ксаффолдер. Я пользуюсь yeoman.io
В нём есть официальный генератор веб-приложения webapp . В пакете генератора gulp в который завёрнуто sass + bootstrap sass + bower в котором ещё куча всего завёрнуто + chai и mocha (тестировщики кода) + browsersync который заводится на 3001 порту. прочитай на сайте что я скинул. Способ для самых ленивых лентяев. Как с нуля:
Ставишь nodeJS, gulp bower глобально.
Ставишь yo глобально (npm i yo -g)
Ставишь генератор глобально (npm i generator-webapp -g)
Создаёшь ручками папку проекта и пишешь одну команду (yo webapp)
Тебе инициализируется проект с полной архитектурой. Я ещё её по смакссу докручиваю допиливаю.
Заводишь сервак (команда gulp serve) и начинаешь неистово кодить

Comments

[Никита Кит]

забыл сказать - ещё предварительно ставишь и конфигурируешь git (это для package.json)

[freeman0204]

Никита Кит: Круто!

[Никита Кит]

Артур Черешнюк: ты в browsersync пощёлкайся и посмотри изменения - вот что круто и мало кто шарит))) тут никакой pixel perfect рядом не стоял!

[copal]

в котором ещё куча всего завёрнуто + chai и mocha (тестировщики кода)

только вот весь мир давно использует связку karma + jasmine.. И кто знает какая фигня там ещё присутствует. А если захотите изменить, то придется свой писать..

[Никита Кит]

copal: суть генератора yeo man webapp в том, что на его основе можно сделать *барабаннннннаядррробь* другой генератор! в который вкрутить другие тестировщики! или, что ещё проще, найти готовый генератор с этими тестировщиками!)))

[Никита Кит]

copal: а насчёт "кто знает какая фигня там ещё присутствует" - знает любой разработчик, осведомлённый о том, что такое зависимости и как с ними работать.

[copal]

Никита Кит: с Ваших слов можно понять что проблема позволяет решить себя при помощи создания других проблем. А самое главное что правильный разработчик сможет все подчистить и перестроить... Это просто круть! Сидите на нем и разгребайте говно раз Вам это нравится.

[Никита Кит]

copal: ну если добавление и изменение плагинов API для тебя проблема, значит есть тебе ещё к чему стремиться. Ну или пиши с нуля если не лень. А чистить на yeo man ничего не надо. При компиляции проекта движок детектит что ты использовал а что нет, и компилирует в проект только те элементы модулей, что ты использовал. Остальное откидывает. без всяких CDN и прочего. Ты просто не знаешь что это такое и на каком уровне какими людьми это всё продумывается. Судя по всему, они явно умнее тебя. И меня. Они вообще не сидят на тостере)))

[copal]

Никита Кит: ну вот я и говорю сидите и разгребайте говно за умными. Хочу добавить специально для Вас-для умного, что bower тоже уже позавчерашний век...

[Никита Кит]

copal: В вебе нет определения "позавчерашний век". Для своих целей есть свои инструменты. Так что твоя полемика ни к месту. Я уже вижу что с тобой спорить бесполезно. Ты называешь позавчерашним веком еженедельно обновляющиеся npm-пакеты... ту хард ту би труз...

[copal]

Никита Кит: Вы сами сказали что спорите со мной и говорите что я не прав из-за того что называю старое старым. Действительно в таком случаи лучше не спорить, тем более что я не говорил что является сегодняшним, но Вы взяли на себя смелость сделать это за меня. ВАЩЕ безумие. Можете не писать что Вам кажется на этот раз и даже в другой, это Вам просто кажется так..

[Никита Кит]

copal: мне кажется у тебя бугуртит, потому что я подсказал парню классную фичу и он выделил мой ответ как решение, оставив тебя без внимания)

[copal]

Никита Кит: вот блин, раскусили.. Я прям уже хотел начать умолять чтобы мне плюсанули или похвалили чтоль. Ну ладно, буду теперь молча завидовать, а то ведь парень-то Вас выбрал.

[copal]

Никита Кит: только когда наступит время и Вы поймете какой шляпой является Ваш совет, подойдите и еб*нитесь головой об стену чтобы в следующий раз спорить не хотелось.

[Никита Кит]

copal: like)

[freeman0204]

Никита Кит: "ты в browsersync пощёлкайся и посмотри изменения - вот что круто и мало кто шарит))) тут никакой pixel perfect рядом не стоял!" Что то не понял о чем вы? Какая связь browsersync и pixel perfect?

[Никита Кит]

Артур Черешнюк: оба для соблюдения пропорций в макете

Answer 2

[sim3x]

Начни с
https://en.bem.info/methodology/filesystem/

Answer 3

[sergey]

Странный немного вопрос: заходим на github в поиске вбиваем gulp или gulpfile.js и тебе как минимум +100500 вариантов отечественных, зарубежных сборок. Выбираешь тут которая соответствует твоим потребностям и отмечена соответственным количеством разработчиков. Клонируешь ее и пользуйся, ну или переделай чуток под себя. Все.