Как это работает

Общие принципы

Этап buildStart

1. Записывается файл ./src/layouts/mixins.pug с includ-ами pug-файлов всех блоков.
   • в файл попадают все существующие блоки-компоненты из директории ./src/components.
2. Записываются все служебные файлы: ./src/styles/style.scss и ./src/scripts/entry.js.
   • в памяти создаётся список всех используемых блоков-компонентов.
3. Копируются все статические ресурсы (конфигурация для копирования./builder.config.js — filesRegexp: png|jpg|jpeg|gif|webp) из компонентов.

Этап transform

1. При создании, модификации блоков обновляется их список в памяти и служебные файлы (./src/layouts/mixins.pug, ./src/styles/style.scss и ./src/scripts/entry.js).
2. В разметку прокидываются данные.
3. Компилируются файлы страниц, стилей (результат обрабатывается плагинами PostCSS), скриптов.
4. Запускается линтинг pug-файлов.
5. Генерируется svg-спрайт.

   ⚠️ Внимание!

   SVG-спрайт собирается один раз при запуске разработки. Чтобы добавить новые иконки, необходимо перезапустить сборку.

Этап buildEnd

1. Генерируется служебный хеш-файл ./src/service/hashes.json.
2. Разметка бьютифицируется.

Этап closeBundle

1. В разметку подставляются пути для svg-иконок.

Разработка, сборка и предпросмотр

npm run dev

В процессе разработки сборка файлов проекта не выполняется, все операции происходят в памяти. Директория для собранного проекта ./build не создаётся, но запускается локальный сервер, осуществляется мониторинг изменений файлов проекта и линтинг pug-файлов.

npm run build

При сборке проекта создаётся директория ./build, в которую помещаются все собранные файлы. Локальный сервер не запускается, и мониторинг изменений файлов проекта не осуществляется.

npm run preview

Предпросмотр проекта запускает локальный сервер (корневая директория — ./build).

⚠️ Внимание!

• до предпросмотра вам обязательно нужно запустить сборку проекта: npm run build;
• предпросмотр всегда отображает последнюю сборку в ./build и не будет обновляться автоматически при изменении кода.