Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

Установка HTML: Препроцессор Pug

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

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

npm install 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')
    meta(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">
    <meta 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. Скомпилируйте файл из примера. Попробуйте использовать разные теги.

Аватары экспертов Хекслета

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.

Ошибки, сложный материал, вопросы >
Нашли опечатку или неточность?

Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

  • задайте вопрос. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
  • расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
  • изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.
Об обучении на Хекслете

Для полного доступа к курсу нужна профессиональная подписка

Профессиональная подписка откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.

Получить доступ
900
упражнения
2000+
часов теории
3200
тестов

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.

  • 120 курсов, 2000+ часов теории
  • 900 практических заданий в браузере
  • 360 000 студентов
Отправляя форму, вы соглашаетесь c «Политикой конфиденциальности» и «Условиями оказания услуг»

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Aviasales
Логотип компании Yandex
Логотип компании Tinkoff
Рекомендуемые программы

С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.

Иконка программы Верстальщик
Профессия
Вёрстка с использованием последних стандартов CSS
в любое время 5 месяцев

Есть вопрос или хотите участвовать в обсуждении?

Зарегистрируйтесь или войдите в свой аккаунт

Отправляя форму, вы соглашаетесь c «Политикой конфиденциальности» и «Условиями оказания услуг»