Шаблонизатор pug позволяет отделить представление от данных в проектах, использующих node.js, интегрируется с такими фреймворками как Express и библиотекой React JS.

Установка шаблонизатора Pug

При отдельной установке используется менеджер пакетов npm

$ npm install pug

Другой вариант установки, если вы устанавливаете фреймворк Express, разворачивая приложение с использованием генератора приложений (express-generator). Сначала устанавливаем генератор

$ npm install express-generator -g

а потом используем генератор для создания структуры приложения, указав в параметрах шаблонизатор pug

$ express --view=pug myapp

Переходим в созданную директорию myapp и выполняем установку зависимостей с помощью npm

$ cd myapp
$ npm install

В созданном готовом приложении уже есть шаблонизатор pug в каталоге node_modules и несколько готовых шаблонов в каталоге views.

Использование шаблонизатора Pug

Вызов данных вставляется в код шаблона 

//- template.pug
p #{data} размещены на сайте

Код шаблона, имеющего обычно расширение .pug, преобразуется (компилируется) в javascript-функцию, принимающую в качестве параметров объект, содержащий данные для генерируемой страницы.

const pug = require('pug'); // подключаем модуль pug

// Преобразуем шаблон template.pug в функцию
const compiledFunction = pug.compileFile('template.pug');

// Передаем функции данные в виде javascript-объекта
console.log(compiledFunction({
  data: 'Данные для страницы'
}));
// "<p>Данные для страницы размещены на сайте</p>"

Помимо функции compile(), есть также функция render(), позволяющая объединить в одном коде компиляцию шаблона и рендер (вывод в шаблон) данных.

// Компиляция шаблона template.pug, и вывод данных в шаблон
console.log(pug.renderFile('template.pug', {
  data: 'Передаваемые данные'
}));

Новая реализация шаблонизатора Pug 2 вышла в 2016 году. В ней добавилась новая функциональность.

Для интеграции с библиотекой React создан плагин к утилите babel - babel-plugin-transform-react-pug.