Логотип Хекслета

HTML: Препроцессор Pug

Теория: Установка

Как и с препроцессором SASS, для использования Pug используется интерпретатор — программа или скрипт, который переводит шаблон Pug в HTML. В этом курсе будет использован npm-пакет pug-cli, который позволит компилировать файлы с помощью командной строки. Это похоже на использование пакета sass из курса SASS: Основы.

Для установки интерпретатора Pug воспользуйтесь пакетом pug-cli:

npm install pug pug-cli

Это команда установит компилятор pug и сам пакет pug-cli.

Вы можете установить пакет в конкретную директорию, или глобально, если использовать флаг -g при установке. Чтобы узнать версию установленного пакета, введите команду pug --version. На момент написания курса используется следующая версия:

pug version: 2.0.4
pug-cli version: 1.0.0-alpha6

Первый шаблон

Разберём работу интерпретатора. Для этого создадим файл index.pug со следующим содержимым:

doctype html
html(lang='ru')
  head
    meta(charset='UTF-8')
    meta(name='viewport' content='width=device-width, initial-scale=1.0')
    link(rel='icon' type='image/x-icon' href='favicon.ico')

    title Мой первый Pug-шаблон

    link(rel='stylesheet' href='./styles/app.css')

  body
    h1 Шаблон Pug
    p
      | Мой первый шаблон с использованием Pug.
      | Он позволит мне удобнее верстать страницы.

Даже если вы впервые видите Pug разметку, то без труда разберёте, что тут происходит. Это важно, так как снижает порог входа для людей, знакомых с синтаксисом HTML.

Настало время скомпилировать этот код. Для этого достаточно указать команду pug и передать путь к файлу, который нужно скомпилировать. Если не указывать других опций, то файл будет автоматически скомпилирован под тем же именем и в той же директории.

pug index.pug --pretty
<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <title>Мой первый Pug-шаблон</title>
    <link rel="stylesheet" href="./styles/app.css">
  </head>
  <body>
    <h1>Шаблон Pug</h1>
    <p>
      Мой первый шаблон с использованием Pug.
      Он позволит мне удобнее верстать страницы.
    </p>
  </body>
</html>

По умолчанию, pug переводит код в минимизированный HTML. Из него вырезаны пробелы между тегами, табуляция и перевод строк. Это удобно при разработке, но, во время обучения, важно видеть полный результат без минификации. Для этого используется опция --pretty. Если вы уверены в коде, то просто уберите её.

В разработке скомпилированные файлы зачастую располагаются отдельно от исходных файлов. Это удобно, так как разработка ведётся в одной директории, а файлы после компиляции, которые пойдут на сервер, находятся в другой директории. В pug-cli для этого используется флаг -o после которого указывается путь к директории, куда должен компилироваться файл.

pug index.pug --pretty -o ./build/

Во время разработки удобно компилировать файлы после каждого сохранения. Для этого используется флаг -w. После этого процесс постоянно будет следить за файлом и компилировать его в случае изменений. Итого, ваши учебные проекты могут иметь следующий вид:

pug index.pug --pretty -w -o ./build/

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

pug index.pug --pretty --watch --out ./build/

Полный список команд можно вывести с помощью команды pug --help.

Дополнительное задание

  1. Установите npm-пакет pug-cli
  2. Скомпилируйте файл из примера. Попробуйте использовать разные теги.

Рекомендуемые программы

Навигация
Теория
Тесты