Pug – это не мопс, тогда кто?
Pug – это HTML препроцессор, написанный на JS для работы на платформе Node.js, с одной единственной целью – ускорить верстку. За счет чего верстать станет быстрее?
Нет открывающих и закрывающих тегов, вложенность регулируется отступами. Давайте сравним, как бы мы написали данный код, в обычном HTML и с Pug.
HTML
<div>
<h1>Pug</h1>
<p>HTML</p>
<p>шаблонизатор</p>
</div>
Pug
div
h1 Pug
p HTML
p шаблонизатор
Редактирование текста
Как редактировать текст, если нет закрывающих тегов? Разработчики, проявили милосердие и кое-что оставили для нас – закрывающие и открывающие теги, внутри текста.
HTML
<p>Верстаю с препроцессором <b>Pug</b>.</p>
Pug
p Верстаю с препроцессором <b>Pug</b>.
Как записать тип документа.
HTML
<!DOCTYPE html>
Pug
doctype html
Создание и вывод переменных.
// переменные
- var title = " Pug – это не мопс ";
- var who = "Точно не собака.";
- var what = "<span>шаблонизатор и препроцессор</span>";
// Pug код
h1= title
p Тогда, кто это? #{who}
p Не кто, а что: {what}
// Скомпилированный HTML
<h1>Pug – это не мопс</h1>
<p>Тогда, кто это? Точно не собака.</p>
<p>Не кто, а что: <span>шаблонизатор и препроцессор</span></p>
Переиспользование блоков через миксины.
HTML
<ul>
<li class="dog">pug</li>
<li class="dog">mops</li>
<li class="dog">griffon</li>
</ul>
Pug
// миксин
mixin dog(breed)
li.dog= breed
//- Pug код
ul
+dog('pug')
+dog('mops')
+dog('griffon')
Однако браузер не поймет то, что мы тут понаписали. Поэтому Pug код сначала нужно скормить компилятору. На компьютере должна быть установлена программа Node.js и редактор кода VS code (необязательно).
Установка Pug
- Открыть терминал у VS code
- Выполнить команду $ npm install pug
- Затем npm install pug-cli –g
- Команда pug –help выведет список всех доступных команд.
- Создать папку с файлом, index.pug
- Выполнить команду pug -w index.pug
- На выходе, получите скомпилированный index.html, в той же папке
Заключение
Хочу предостеречь тех, кто только начинает изучать HTML. Сначала освойте нативный HTML, а на Pug не обращайте никакого внимания, всему своё время. Использование препроцессоров хорошо работает на разработчиков с опытом – реально сокращает время верстки. Для начинающих, одновременное изучение классического HTML с препроцессорами – вызовет дикий хаос в голове.
Предвижу ваши возражения: "Вам легко говорить, но в 90% вакансиях на верстальщика / front-end разработчика, одним из требований стоит – Pug (бывший Jade)". Конечно же работодатели требуют использование прогрессивных способов верстки. Скажу вам по секрету, что новичков никто не ждет. Если вы новичок, то вам нужно начинать с основ верстки (есть хороший видео-курс по верстке), но никак не с изучения препроцессоров.
-
Создано 23.08.2019 10:25:11
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.