9 месяцев назад
История
readme.md
Описание
Сборщик работает по двум принципам:
- Множетсвенный entrypoin в компонентах, автоматически проходиться по текущей папке local в поисках папок src. Все найденые папки в которых есть входные файлы script и style собирает и результат сборки кладет выше на 1 уровень,
local/components/[Namespace]/[Component Name]/templates/[Название шаблона компонента]/src/style.scssбудет помещен вlocal/components/[Namespace]/[Component Name]/templates/[Название шаблона компонента]/style.scss. Таким образом мы получаем на выходе два файла которые автоматически подключаются в шаблонах компонентов битрикс, при этом мы используем всю мощь современного стека для разработки - Множетсвенный entrypoin в обших папках проекта, берем все source и билдем на этот же уровень только в папку asset
| Назначение | Исходный файл | Собранный файл |
|---|---|---|
| Стили глобальные | local/source/css/style.scss | local/assets/css/style.css |
| Скрипты глобальные | local/source/js/script.js | local/assets/js/script.js |
| Стили глобальных компонентов | local/components/[Namespace]/[Component Name]/templates/[Название шаблона компонента]/src/style.scss | local/components/[Namespace]/[Component Name]/templates/[Название шаблона компонента]/style.css |
| Скрипты глобальных компонентов | local/components/[Namespace]/[Component Name]/templates/[Название шаблона компонента]/src/script.js | local/components/[Namespace]/[Component Name]/templates/[Название шаблона компонента]/script.js |
| Стили шаблона | local/templates/[Каталог темы]/source/css/style.scss | local/templates/[Каталог темы]/assets/css/style.css |
| Скрипты шаблона | local/templates/[Каталог темы]/source/js/script.js | local/templates/[Каталог темы]/assets/js/script.js |
| Стили компонента шаблона | local/templates/[Каталог темы]/components/[Namespace]/[Component Name]/templates/[Название шаблона компонента]/src/style.scss | local/templates/[Каталог темы]/components/[Namespace]/[Component Name]/templates/[Название шаблона компонента]/style.css |
| Скрипты компонента шаблона | local/templates/[Каталог темы]/components/[Namespace]/[Component Name]/templates/[Название шаблона компонента]/src/script.js | local/templates/[Каталог темы]/components/[Namespace]/[Component Name]/templates/[Название шаблона компонента]/script.js |
Установка
Содержимое репозитория нужно разместить в корневой папке проекта, выполнить команду npm install для установки всех зависимостей
В шаблоне сайта необходимо подключить 2 файла header.php:
use Bitrix\Main\Page\Asset;
Asset::getInstance()->addJs('/runtime/script.js');
Asset::getInstance()->addJs('/vendors/script.js');
Начало работы
- В нужной папке шаблона сайта или компонента создать дериктори src а в local дериктори source
- Создать два глваный файла (если требутся) script.js и style(.css, .scss, .less, .styl)
- Запустить сборку из консоли, командой webpack
Общие файлы проекта
Сборка поддерживает алиас @ для папки /local/source/img/. Там рекомендуется храниться статику, для файлов стилей испольуется подключение такого вида background: url("~@/img/summer.png") для JS import @js/awesome.js
В сборке присутсвует file-loader который обрабатывает статику. Все файлы он положит в папку /local/asset/img/ и добавит hash в имя файла
Описание
Конвейеры
0 успешных
0 с ошибкой