Структура проекта

Содержание:

Ниже расположено описание только нужных для работы файлов и папок. Более подробное описание можно получить в официальной документации.

src — исходный код самого сайта. Содержит тему для Bootstrap и шаблоны Handlebars.

dist (изначально ее нет) — полностью готовая сборка сайта.

.eslintrc.json — настройки линтера JavaScript. О том, как настроить линтер, можно прочитать в официальной документации EsLint.

.stylelintrc.json — настройки линтера стилей. Настройка StyleLint

package.json — информация о нашем проекте. Официальная документация

.editorconfig — настройка тестового редактора или среды разработки. Подробнее про .editorconfig

README.md — ReadMe-файл для Гитхаба. Поддерживает Markdown.

Структура исходного кода

Процесс работы Baumeister можно представить как преобразование содержимого папки src в содержимое папки dist.

Стили проверяются линтером, собираются и преобразовываются из SCSS в CSS по правилам, установленным Bootstrap, после чего дополняются вендорными префиксами и минифицируются. Шаблоны Handlebars превращаются в готовые HTML-файлы. Изображения оптимизируются, их размер значительно уменьшается. JavaScript-код проверяется линтером, оптимизируется, минифицируется, собирается в один файл.

Готовый сайт, находящийся в папке dist, радикально отличается от его исходных текстов. Его редактирование нецелесообразно: крайне сложно и бесполезно редактировать минифицированные скрипты и стили. Все изменения следует вносить только в файлы, расположенные в папке src.

app — JavaScript-код.

assets — картинки, шрифты и тема для Bootstrap. Все медиа-файлы (например, видео) следует помещать сюда.

handlebars — шаблоны Handlebars.

Остальные файлы с расширением .hbs превратятся в одноименные страницы в корне сайта. Например, index.hbs превратится в index.html.

Папка app (JavaScript-код)

tests — модульные тесты для JavaScript-кода.

.eslintrc.json — локальные настройки EsLint.

base.js — часть Bootstrap. Лучше не удалять.

index.js — главный файл. Дополнительный код следует писать именно тут.

polyfills.js — ES6-полифиллы, которые могут вам потребоваться.

Папка assets (медиа-файлы)

fonts — файлы шрифтов.

img — картинки.

scss — тема для Bootstrap. Именно с ней мы будем работать наибольшее количество времени.

Папка assets/scss (тема для Bootstrap)

Моя тема называется my-awesome-theme. У вас название будет отличаться.

(название темы) — папка со стилями всех компонентов. При создании нового компонента файл с его стилями нужно создавать именно тут. Более подробно этот процесс описан в разделе «Рабочий процесс». По умолчанию содержит набор файлов, служащих примерами использования различных приемов работы с компонентами.

_(название темы).scss — корневой файл темы. При создании файла со стилями нового компонента, файл с его стилями нужно вызывать из корневого файла.

_print.scss — стили, применяемые при печати страницы. Не будут включены, пока вы не включите их в файле index.scss.

_variables.scss — переменные Bootstrap. Если вы хотите как-то изменить стандартные настройки Bootstrap, лучший способ сделать это — изменить этот файл.

index.scss — корневой файл всего проекта. Из него можно вызывать другие файлы, отличные от файлов темы, например, файлы сторонних плагинов. Корневой файл темы добавляется именно сюда.

Папка handlebars (шаблоны Handlebars)

helpers — хэлперы Handlebars. Представляют из себя короткие скрипты, вызываемые напрямую из шаблонизатора.

layouts — глобальные файлы шаблонов. Мы будем работать только с одним шаблоном: default.hbs, он содержится в папке по умолчанию и представляет из себя готовую HTML-страницу с доктайпом, грамотно заполненным тегом head, подключенными стилями и скриптами. Изменяется лишь содержимое тега body: при шаблонизации в него подставляется содержимое .hbs-файлов, находящихся в папке src, при этом каждый файл превращается в отдельную HTML-страницу. Тег head этих страниц, как и ожидается, полностью идентичен, отличается лишь title и содержимое тега body.

partials — файлы разметки переиспользуемых компонентов. При создании компонентов, разметка компонента создается именно в этой папке, в соответствующем файле Handlebars, наряду с соответствующим файлом стилей, создаваемым в папке assets/scss/(название темы).

results matching ""

    No results matching ""