Общие правила структуры
Last updated
Was this helpful?
Last updated
Was this helpful?
Наглядно со структурой можно ознакомиться по . Она повторяет MVP битрикса, немного расширяя её возможности.
Использование SASS препроцессора
Использование ES6
Понятная файловая структура
Простота использования
/local/gulp/
– хранит конфигурации для gulp
/local/templates/<template name>/
– папка шаблона сайта
/local/templates/<template name>/assets/js/
– папка для хранения глобальных JS скриптов шаблона
/local/templates/<template name>/assets/styles/
– папка для глобальных стилей шаблона (SCSS/CSS)
/local/templates/<template name>/assets/images/
– папка для глобальных картинок шаблона (svg в том числе)
/local/templates/<template name>/assets/fonts/
– папка для шрифтов
/local/templates/<template name>/assets/libs/
– папка для библиотек, о ней чуть позже
/local/templates/<template name>/components/
– папка для хранения шаблонов компонентов
Gulp отслеживает изменение в файлах (выделены на схеме красным) и компилирует их в режиме реального времени, получившиеся файлы складывает рядом с исходным файлом.
Благодаря этому, мы предсказуемо можем использовать SCSS/ES6 в наших проектах и улучшать нашу продуктивность.
Не забывайте перед работой запускать gulp командой gulp dev
Библиотеки располагаются по адресу /local/templates/<template name>/assets/libs/
.
Gulp не отслеживает изменения в этой директории.
Здесь мы храним плагины (к примеру slick, owl carousel) или исходники фреймворков (bootstrap). Эти файлы не требуют компиляции и могут подключаться импортом в SCSS-файлах или напрямую в компонентах (css, js файлы).
Так как этот фреймворк используется почти на каждом нашем проекте, мы пошли дальше и упростили работу с этим инструментом.
В файле main-styles.scss
мы импортируем ядро и модули bootstrap.
Не пугайтесь странной записи (для импорта нужен полный путь к папке с файлом). Так как мы знаем, что bootstrap всегда лежит в папке /local/templates/<template name>/assets/libs/bootstrap/
, мы сделали для неё сокращение и можно указывать просто как bootstrap/
Модули импортируются в файле /local/templates/<template name>/assets/libs/bootstrap/_modules.scss
Модули подключаются только в файле main-styles.scss
, потому что их стили требуются на всем сайте.
В модулях мы можем выбирать только те части bootstrap, которые нам нужны для проекта. Тем самым мы очищаем проект от лишнего мусора. Пример файла _modules.scss
Обратите внимание, лишние части закомментированы и не будут включены в стили проекта. Так же здесь импортируется свой модуль nogutters
Ядром мы назваем файл /local/templates/<template name>/assets/libs/bootstrap/_core.scss
Этот файл служит для задания параметров фреймворка (по сути копирует файл _variables.scss
, только перезаписывает значения его параметров).
Ядром называется потому, что в нем так же импортируется базовый функционал фреймворка
Поэтому важно! Если вы хотите использовать миксины, переменные или функции bootstrap в шаблоне компонента, вам необходимо в начале вашего SCSS-файла импортировать ядро
Файл /local/templates/<template name>/assets/styles/main-styles.scss
должен содержать в себе только импортируемые файлы. В основном это стили или библиотеки используемые на всем сайте глобально (например bootstrap).
Если SCSS файл используется только для импорта в другой файл, его именование должно начинаться с нижнего подчеркивания. Например: _header.scss
, _footer.scss
. Такие файлы компилятор не рассматривает, а значит не будет плодить мусор в проекте.
Папка /local/templates/<template name>/assets/styles/elements/
предназначена для глобальных (_header.scss
, _footer.scss
, _globals.scss
) или повторяющихся элементов (badges.scss
, tabs.scss
).
Будьте внимательны, файл badges.scss
будет скомпилирован в badges.css
и этот файл можно будет подключать в компонентах.
Файл /local/templates/<template name>/assets/styles/elements/_globals.scss
служит для глобальных стилей и импортируется в файле main-styles.scss
Для шаблонов компонента есть свои стили style.css
в папке компонента. Поэтому все стили компонентов мы изолируем (то есть делаем стили доступными только при инициализации компонента). Используйте файл style.scss
, он будет скомпилирован в style.css
. Так же помните, что style.css
подключается в шаблон компонента автоматически, без лишнего кода.
Для шаблонов компонента скрипты так же изолируются, как и стили. Для этого есть файл script.js
. Допускается использовать современные стандарты ES6, файл будет скомпилирован в script.min.js
и автоматически подключится в компоненте.
Если вы используете для вашего скрипта глобальные скрипты, обязательно проверяйте их наличие, чтобы не вызывать ошибки в будущем или дублируйте их подключение в шаблоне компонента.