0 added
0 removed
Original
2026-01-01
Modified
2026-02-26
1
<p>Как и с препроцессором SASS, для использования Pug используется интерпретатор - программа или скрипт, который переводит шаблон Pug в HTML. В этом курсе будет использован npm-пакет pug-cli, который позволит компилировать файлы с помощью командной строки. Это похоже на использование пакета sass из курса<a>SASS: Основы</a>.</p>
1
<p>Как и с препроцессором SASS, для использования Pug используется интерпретатор - программа или скрипт, который переводит шаблон Pug в HTML. В этом курсе будет использован npm-пакет pug-cli, который позволит компилировать файлы с помощью командной строки. Это похоже на использование пакета sass из курса<a>SASS: Основы</a>.</p>
2
<p>Для установки интерпретатора Pug воспользуйтесь пакетом pug-cli:</p>
2
<p>Для установки интерпретатора Pug воспользуйтесь пакетом pug-cli:</p>
3
<p>Это команда установит компилятор pug и сам пакет pug-cli.</p>
3
<p>Это команда установит компилятор pug и сам пакет pug-cli.</p>
4
<p>Вы можете установить пакет в конкретную директорию, или глобально, если использовать флаг -g при установке. Чтобы узнать версию установленного пакета, введите команду pug --version. На момент написания курса используется следующая версия:</p>
4
<p>Вы можете установить пакет в конкретную директорию, или глобально, если использовать флаг -g при установке. Чтобы узнать версию установленного пакета, введите команду pug --version. На момент написания курса используется следующая версия:</p>
5
<h2>Первый шаблон</h2>
5
<h2>Первый шаблон</h2>
6
<p>Разберём работу интерпретатора. Для этого создадим файл<em>index.pug</em>со следующим содержимым:</p>
6
<p>Разберём работу интерпретатора. Для этого создадим файл<em>index.pug</em>со следующим содержимым:</p>
7
<p>Даже если вы впервые видите Pug разметку, то без труда разберёте, что тут происходит. Это важно, так как снижает порог входа для людей, знакомых с синтаксисом HTML.</p>
7
<p>Даже если вы впервые видите Pug разметку, то без труда разберёте, что тут происходит. Это важно, так как снижает порог входа для людей, знакомых с синтаксисом HTML.</p>
8
<p>Настало время скомпилировать этот код. Для этого достаточно указать команду pug и передать путь к файлу, который нужно скомпилировать. Если не указывать других опций, то файл будет автоматически скомпилирован под тем же именем и в той же директории.</p>
8
<p>Настало время скомпилировать этот код. Для этого достаточно указать команду pug и передать путь к файлу, который нужно скомпилировать. Если не указывать других опций, то файл будет автоматически скомпилирован под тем же именем и в той же директории.</p>
9
<p>По умолчанию, pug переводит код в минимизированный HTML. Из него вырезаны пробелы между тегами, табуляция и перевод строк. Это удобно при разработке, но, во время обучения, важно видеть полный результат без минификации. Для этого используется опция --pretty. Если вы уверены в коде, то просто уберите её.</p>
9
<p>По умолчанию, pug переводит код в минимизированный HTML. Из него вырезаны пробелы между тегами, табуляция и перевод строк. Это удобно при разработке, но, во время обучения, важно видеть полный результат без минификации. Для этого используется опция --pretty. Если вы уверены в коде, то просто уберите её.</p>
10
<p>В разработке скомпилированные файлы зачастую располагаются отдельно от исходных файлов. Это удобно, так как разработка ведётся в одной директории, а файлы после компиляции, которые пойдут на сервер, находятся в другой директории. В pug-cli для этого используется флаг -o после которого указывается путь к директории, куда должен компилироваться файл.</p>
10
<p>В разработке скомпилированные файлы зачастую располагаются отдельно от исходных файлов. Это удобно, так как разработка ведётся в одной директории, а файлы после компиляции, которые пойдут на сервер, находятся в другой директории. В pug-cli для этого используется флаг -o после которого указывается путь к директории, куда должен компилироваться файл.</p>
11
<p>Во время разработки удобно компилировать файлы после каждого сохранения. Для этого используется флаг -w. После этого процесс постоянно будет следить за файлом и компилировать его в случае изменений. Итого, ваши учебные проекты могут иметь следующий вид:</p>
11
<p>Во время разработки удобно компилировать файлы после каждого сохранения. Для этого используется флаг -w. После этого процесс постоянно будет следить за файлом и компилировать его в случае изменений. Итого, ваши учебные проекты могут иметь следующий вид:</p>
12
<p>Если изначально вам не очень удобно ориентироваться в таких флагах, то можно использовать их полные названия:</p>
12
<p>Если изначально вам не очень удобно ориентироваться в таких флагах, то можно использовать их полные названия:</p>
13
<p>Полный список команд можно вывести с помощью команды pug --help.</p>
13
<p>Полный список команд можно вывести с помощью команды pug --help.</p>
14
<h2>Дополнительное задание</h2>
14
<h2>Дополнительное задание</h2>
15
<ol><li>Установите npm-пакет pug-cli</li>
15
<ol><li>Установите npm-пакет pug-cli</li>
16
<li>Скомпилируйте файл из примера. Попробуйте использовать разные теги.</li>
16
<li>Скомпилируйте файл из примера. Попробуйте использовать разные теги.</li>
17
</ol>
17
</ol>