Как и с препроцессором 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.
Дополнительное задание
- Установите npm-пакет
pug-cli - Скомпилируйте файл из примера. Попробуйте использовать разные теги.
Остались вопросы? Задайте их в разделе «Обсуждение»
Вам ответят команда поддержки Хекслета или другие студенты
Для полного доступа к курсу нужен базовый план
Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.
