lukoie
@lukoie

Какие есть рекомендации по организации кода верстки?

Ок, попробую с препроцессорами(хотя пока для большинства задач вполне и цсс обхожусь). Мне не очень нравится юникс.вэй, потому вместо гита у меня смартгит, вместо композера у меня композеркэт, а вместо галпа - препрос.
Организация кода как обычно:
css\
fonts\
img\
js\

как я понимаю, для препроцессора мне надо выделить директорию scss, но как правильно организовать такое дерево?
Собирать ли в dist/ или просто из директории scss в css?
то есть, при добавлении препроцессора правильно собирать всё в директорию dist, уже минифицированное, конкатинированное с обработанными картинками, скриптами, или как это делают?
  • Вопрос задан
  • 136 просмотров
Пригласить эксперта
Ответы на вопрос 1
@MaxKorz
Делается две директории.
src\
dist\

в src размещается все оригинальное - то с чем работает разработчик:
- оригинальный HTML/Haml/Pug
- оригинальный CSS/Sass/Scss/Less
- оригинальный JS/TS
- оригинальные изображения
- шрифты
и т.д.

Структуру папок внутри src придумывайте сами исходя из проекта (та структура папок что вы привели в вопросе вполне нормальная)

То есть папка src - это исходный код всего вашего проекта.

Скрипт(grunt/gulp/webpack и т.д.) берет оригинальные файлы и производит с ними манипуляции:
- компиляция препроцессорами(если нужно)
- минификация и объединение CSS
- минификация и объединение JS
- минификация html
- сжатие изображений
- объединение изображений в спрайты
и т.д.

Результат работы скрипта попадает в папку /dist. Обычно разработчик вообще не в курсе как выглядит код в результате обработки. И лезть в этот код нужно лишь для откладки самой сборки.

На рабочий сервер(где хостится сайт) заливается только содержимое папки /dist.
В гит загружается папка /src. Результат сборки (папка /dist) коммитится очень редко (в основном авторами плагинов)
Ответ написан
Ваш ответ на вопрос

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

Войти через TM ID
Похожие вопросы