Описание репозитория

WebPack сборка для проектов верстки на Bitrix Framework. Включает в себя:

• Препроцессор для SASS, SCSS
• Минификация CSS файлов
• Babel
• Шаблонизатор PUG

Структура экспорта

По умолчанию файлы собираются под BitrixFramework. Но вы можете настроить проект по своему, используя настройки, описанные ниже. Далее будет описан процесс сборки на основе настроек по умолчанию.

Страницы

Страницы располагаются в папке ./src/pages. Здесь вы неограниченны структурой страниц. Прямо из этого каталога все файлы собираются и переносятся в каталог ./.dist, сохраняя всю структуру папок и имен файлов. Файлы *.PUG компилируются в файлы *.HTML, а файлы *.PHP просто переносятся, сохраняя свою структуру.

Стили

Стили подключаются в файле ./src/app.js, причем подключаются как CSS, SASS и SCSS файлы. Все они объединяются в единый файл ./.dist/local/templates/template_name/styles.css и минифицируются.

JavaScript файлы

Скрипты подключаются в файле ./src/app.js. Все они объединяются в единый файл ./.dist/local/templates/template_name/js/scripts.js и минифицируются. Также в проект уже включен jQuery версии 3.5.1 в зависимостях проекта.

Файлы шаблона

В проекте используется папка ./src/templates в ней расположены вспомогательные файлы для шаблонизатора PUG и также вы файлы header.php и footer.php. Файлы шаблонизатора вы подключаете когда верстаете новые страницы проекта. А вот файлы header.php и footer.php просто переносятся в папку шаблона ./.dist/local/templates/template_name.

Настройки

Для настроек используйте файл config.json. В нем находятся все необхоимые настройки сборки проекта. Ниже описаны какие настройки за что отвечают.

• config.teplate_name. Имя шаблона.

• config.output. Каталог относительно папки проекта в который будут компилироваться все файлы проекта.

• config.output_pages. Каталог относительно папки config.output в который будут компилироваться все страницы.

• config.output_templates. Каталог шаблонов относительно папки config.output проекта в который будет компилироваться шаблон.

• config.output_template. Каталог шаблона относительно папки config.output проекта в который будут компилироваться все файлы шаблона.

• config.output_css. Каталог в который будут компилироваться CSS файлы (относительно config.output каталога).

• config.output_js. Каталог в который будут компилироваться JavaScript файлы (относительно config.output каталога).

• config.output_css_name. Имя компилируемого файла CSS. Все CSS, SASS и SCSS файы компилируются именно в него. имя указывайте без расширения, т.к. расширение будет добавлено к имени, которое вы пропишите.

• config.output_js_name. Имя компилируемого файла JavaScript. Все JavaScript файы компилируются именно в него. имя указывайте без расширения, т.к. расширение будет добавлено к имени, которое вы пропишите.

• config.live_port. Порт для виртуального сервера.

• config.minify_css. Установите параметр в TRUE, если нужно минифицировать CSS файлы в Production версии.

• config.minify_js. Установите параметр в TRUE, если нужно минифицировать JavaScript файлы в Production версии.

Команды

• npm run build. Собрать готовый проект.

• npm run dev. Собрать проект проект для разработки.

• npm run start. Запустить живой сервер для отладки проекта.

• Ctrl + C. Остановить работу сервера.