Pug вместе с Vite

Vite — сборщик и сервер разработки для фронтенда: он сам обновляет страницу в браузере после правки и собирает файлы для публикации. Pug Vite не понимает, но его можно научить плагином — дополнением, которое подключается в настройках Vite. Если вам хватает скрипта из прошлого урока, этот урок можно пропустить.

Плагин

Официального плагина Pug для Vite нет. В уроке используется сторонний пакет vite-plugin-pug-transformer: он вставляет HTML, собранный из шаблона Pug, в страницу index.html. На момент написания плагин поддерживает Vite до 7-й версии, поэтому версию Vite укажите явно:

mkdir cafe-vite
cd cafe-vite
npm init -y
npm pkg set type=module
npm install --save-dev vite@7 vite-plugin-pug-transformer

Перед установкой загляните в описание плагина на npmjs.com: если вышла версия с поддержкой новой Vite, ограничение @7 можно убрать.

Настройка

Создайте в корне проекта файл vite.config.js:

// vite.config.js
import { defineConfig } from "vite";
import pugPlugin from "vite-plugin-pug-transformer";
 
export default defineConfig({
  plugins: [pugPlugin()],
});

Массив plugins перечисляет плагины, которые Vite запускает при обработке файлов.

Страница и шаблон

Vite начинает с файла index.html в корне проекта. Создайте его и отметьте место для шаблона тегом template:

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Кофейня «Утро»</title>
  </head>
  <body>
    <template data-type="pug" data-src="./src/index.pug"></template>
  </body>
</html>

В браузере этот файл пока пустой: тег template ничего не показывает. Атрибут data-src — путь к шаблону. Создайте файл src/index.pug:

h1 Кофейня «Утро»
p Свежий кофе каждый день с 8:00.

Запуск

npx vite

Откройте http://localhost:5173 — появятся заголовок и абзац. Измените текст в src/index.pug и сохраните файл: Vite сам перезагрузит страницу.

Готовые файлы для публикации собирает команда npx vite build. В dist/index.html тег template заменён результатом шаблона:

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Кофейня «Утро»</title>
  </head>
  <body>
    <h1>Кофейня «Утро»</h1><p>Свежий кофе каждый день с 8:00.</p>
  </body>
</html>

Плагин не включает pretty, поэтому теги из шаблона стоят в одну строку. Настройки Pug передаются в плагин параметром pugOptions, а данные для шаблона — параметром pugLocals.

Скрипт или Vite

Дальше в курсе используется скрипт: он проще, и в нём хорошо видно, как Pug работает.

Частая ошибка

Писать разметку Pug прямо внутри тега template в index.html. Плагин читает шаблон только из файла, указанного в data-src, — держите код Pug в файлах .pug.