Документація до збірки на основі Vite

Цей документ описує налаштування та структуру збірки для проєкту, заснованого на Vite.

Основні команди

yarn d        - запуск сервера для розробки.

yarn b        - білд проєкту.

yarn p        - перегляд білду на сервері.

yarn f        - генерація іконочного шрифту та конвертація шрифтів.

yarn i        - генерація тільки іконочного шрифту.

yarn a        - генерація аліасів.

yarn php      - запуск сервера PHP.

yarn coffee   - компіляція CoffeeScript.

Аліаси (скорочення) шляхів

@h/   - /src/html/

@c/   - /src/html/components/

@o/   - /src/html/other/

@ui/  - /src/html/components/UI/

@j/   - /src/js/

@s/   - /src/scss/

@i/   - /src/assets/img/

@f/   - /src/assets/fonts/

@v/   - ./src/assets/video/

@tw/  - ./src/css/

Основні папки проєкту

public/           - папка для розміщення статичних файлів.

src/              - основна директорія для розробки.

src/data          - json файли з данними для компонента.

src/assets/       - зберігання файлів, зображень, шрифтів та відео.

src/scss/         - файли стилів scss без використання tailwind.

src/css/          - файли стилів css при використанні tailwind.

src/html/         - шаблони HTML.

src/index.html/   - сторінки сайту розміщуються в корені директорії src/

Основні команди

snippets.json        — містить рекомендовані сніпети для роботи з шаблоном.

template.config.js   — файл налаштувань шаблону.

Шрифти та іконки

Для шрифтів та іконок використовується папка fonts-converter/:

Шрифти у форматі ttf розміщуються в корені папки fonts-converter/.
SVG-іконки для генерації шрифту — у fonts-converter/icons/.

Процес генерування шрифтів створює файли шрифтів у форматі woff2 в папці src/assets/fonts/, а також генерує файли fonts.scss та icons.scss у src/scss/fonts/ з класами для шрифтів та іконок. Додаткові матеріали для іконок (оптимізовані SVG, шпаргалка по іконках) — у plugins/ifont-gen/dist/.