Установка и сборка

Pug — это пакет npm с функциями для Node.js. Вы пишете шаблоны в файлах .pug, а короткий скрипт вызывает Pug и записывает готовые файлы .html. Понадобится Node.js версии 20 или новее.

Установка

Создайте папку сайта и установите в неё Pug как зависимость для разработки:

mkdir cafe
cd cafe
npm init -y
npm pkg set type=module
npm install --save-dev pug

npm init -y создаёт package.json, а npm pkg set type=module включает в проекте модули ES, чтобы писать import вместо require.

Структура проекта

Шаблоны лежат в src/, готовые страницы попадают в dist/:

cafe/
├── build.js        ← скрипт сборки
├── dist/
│   └── index.html  ← создаёт Pug
├── src/
│   └── index.pug   ← правите вы
└── package.json

Создайте файл src/index.pug:

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

Две строки — два тега: заголовок и абзац с текстом.

Скрипт сборки

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

// build.js
import { mkdirSync, writeFileSync } from "node:fs";
import pug from "pug";
 
const html = pug.renderFile("src/index.pug", { pretty: true });
 
mkdirSync("dist", { recursive: true });
writeFileSync("dist/index.html", html);
console.log("Готово: dist/index.html");

pug.renderFile() читает шаблон и возвращает строку HTML. Второй аргумент — настройки: pretty: true расставляет переносы строк и отступы, чтобы результат было удобно читать. Без этой настройки Pug пишет всю страницу в одну строку — браузеру это неважно, а файл получается меньше.

Запуск

node build.js

В терминале появится «Готово: dist/index.html», а в файле — такой HTML:

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

Откройте dist/index.html в браузере — вы увидите заголовок и абзац.

Чтобы не набирать команду целиком, добавьте её в package.json и запускайте npm run build:

{
  "scripts": {
    "build": "node build.js"
  }
}

Пересобирать страницы после каждой правки помогает режим наблюдения Node.js: команда node --watch-path=src build.js запускает скрипт заново при любом изменении в папке src/.

А pug-cli?

В старых инструкциях Pug запускают командой pug из пакета pug-cli. Этот пакет давно не обновлялся и внутри использует Pug 2, поэтому в курсе используется свой скрипт: в нём работает Pug 3, и его легко расширить, когда страниц станет несколько.

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

Правка в src/index.pug не видна в браузере, потому что браузер открывает dist/index.html, а он не меняется сам. После каждой правки шаблона запускайте npm run build или держите включённым режим наблюдения.