Шаблонизатор pug что это
Pug. Начало работы. Часть первая из двух
Pug — это шаблонизатор и html-препроцессор, написанный на javascript для платформы Node.js, с целью ускорения верстки. Это даже быстрее, чем при использовании emmet — так что будет полезен любому веб-разработчику. Тем более, что освоить Pug можно за пару часов, синтаксис достаточно прост и интуитивно понятен.
Создание проекта
Установка Pug
Для установки надо выполнить две команды, вторая должна быть выполнена из директории проекта:
Пробуем на зуб
Создадим в директории src файл index.pug следующего содержания:
Переходим в директорию src и выполняем команду:
Установка Gulp
Как работать с gulp — это тема для отдельной статьи, так что без подробностей.
Создаем файл gulpfile.js с тремя задачами для преобразования pug-файлов и отслеживания изменений.
Наш файл package.json сейчас имеет только три зависимости:
Синтаксис Pug
Синтаксис Pug достаточно прост. Он не имеет угловых скобок и закрывающих тегов. Вложенность элементов определяется отступом — табуляция или пробел. Классы css задаются через точку, идентификаторы — через решетку, атрибуты — в круглых скобках.
1. Теги, классы, идентификаторы
Давайте создадим маркированный список:
Теперь добавим css-классы нашей разметке:
Добавим тегу
- еще и идентификатор:
2. Атрибуты элемента
Чтобы указать атрибут элементу — достаточно указать его в круглых скобках:
Если атрибутов много, то можно указать их многострочными линиями:
3. Текст элемента
Результат будет одинаковым:
4. Буферизация и экранирование
5. Вывод переменных
6. Элемент внутри элемента
Давайте разместим изображение внутри параграфа:
Еще один пример — параграф, внутри которого и ссылка:
7. Комментарии в коде
8. Подключения (include)
Итоговый файл index.html :
9. Наследование шаблонов
Pug – это не мопс, тогда кто?
Pug – это HTML препроцессор, написанный на JS для работы на платформе Node.js, с одной единственной целью – ускорить верстку. За счет чего верстать станет быстрее?
Нет открывающих и закрывающих тегов, вложенность регулируется отступами. Давайте сравним, как бы мы написали данный код, в обычном HTML и с Pug.
Редактирование текста
Как редактировать текст, если нет закрывающих тегов? Разработчики, проявили милосердие и кое-что оставили для нас – закрывающие и открывающие теги, внутри текста.
Верстаю с препроцессором Pug.
Как записать тип документа.
Создание и вывод переменных.
— var title = » Pug – это не мопс «;
— var who = «Точно не собака.»;
— var what = » шаблонизатор и препроцессор «;
h1= title
p Тогда, кто это? #
p Не кто, а что:
Pug – это не мопс
Тогда, кто это? Точно не собака.
Не кто, а что: шаблонизатор и препроцессор
Переиспользование блоков через миксины.
mixin dog(breed)
li.dog= breed
Однако браузер не поймет то, что мы тут понаписали. Поэтому Pug код сначала нужно скормить компилятору. На компьютере должна быть установлена программа Node.js и редактор кода VS code (необязательно).
Установка Pug
Заключение
Хочу предостеречь тех, кто только начинает изучать HTML. Сначала освойте нативный HTML, а на Pug не обращайте никакого внимания, всему своё время. Использование препроцессоров хорошо работает на разработчиков с опытом – реально сокращает время верстки. Для начинающих, одновременное изучение классического HTML с препроцессорами – вызовет дикий хаос в голове.
Предвижу ваши возражения: «Вам легко говорить, но в 90% вакансиях на верстальщика / front-end разработчика, одним из требований стоит – Pug (бывший Jade)». Конечно же работодатели требуют использование прогрессивных способов верстки. Скажу вам по секрету, что новичков никто не ждет. Если вы новичок, то вам нужно начинать с основ верстки (есть хороший видео-курс по верстке), но никак не с изучения препроцессоров.
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Комментарии ( 0 ):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Copyright © 2010-2021 Русаков Михаил Юрьевич. Все права защищены.
neretin-trike / pug.md
В Pug нет закрывающих тегов, вместо этого он использует строгую табуляцию (или отступы) для определения вложености тегов. Для закрытия тегов в конце необходимо добавить символ / : foo(bar=’baz’)/
Непосредственно в Pug можно вставлять элементы в HTML синтаксисе
В Pug можно встраивать JavaScript код, благодаря чему возможны конструкции показанные ниже.
Констуркция Switch Case
Pug поддерживает switch case, которая представляет собой более наглядный способ сравнить выражение сразу с несколькими вариантами.
Вставка JavaScript кода
Pug поддерживает вставку частей JavaScript кода в шаблоны.
Буфферизированный код начинается с символа =
Pug
Существуют различные комментариев: те, которые будут отображаться после компиляции, и те, которые пропадут.
Pug имеет возможность вставки содержимого одного файла в другой файл Pug.
Pug предоставляет различные способы вывода переменных.
Поддержка миксинов позволяет создавать переиспользуемые блоки.
Многострочный ассоциативный массив
R0NS0N commented Oct 2, 2018
Дякую. коротко і те що потрібно.
nerlihmax commented Oct 8, 2018
Спасибо, очень информативно! Не хватает лишь информации от том, как использовать аргументы из функции рендера, если таковая используется.
AlexeyRomanchenko commented Oct 20, 2018 •
neretin-trike commented Oct 28, 2018
Если я правильно тебя понял, то может быть такое решение:
Mikkou commented Nov 8, 2018
спасибо, коротко и ясно)
warezorwar commented Feb 28, 2019
sh4rov commented Jun 21, 2019
Petrivah commented Aug 5, 2019
Буфферизированный- тот который выводится
Не Буфферизированный- тот который Не выводится
webitall2019 commented Sep 24, 2019
Хороший туториал! спс
Mike2142 commented Nov 4, 2019 •
Очень полезная статья, спасибо!
badunius commented Nov 12, 2019
ситуация, нужно закомментировать один из элементов, находящийся на одном уровне с другими
комментирует 2 и 3
ImLoaD commented Nov 27, 2019 •
В человечьем PUG это делается вроде вот так
Warlock-9000 commented Dec 27, 2019
zzaq17 commented Feb 9, 2020 •
Благодарю) всё понятно и с примерами
Появился вопрос с meta блоками в head. Кто-нибудь сталкивался?
Ошибка в gulp:
Message: Unexpected token (8:8) Details: pos: 558 loc: [object Object] raisedAt: 559 domainThrown: true
Часть кода шаблона:
Часть кода для страницы:
Пробовал и #<>, и всё что нашёл в туториал, и просто название переменной. Но ничего не помогает. Как всё-таки добавить интерполяцию?
Стоит ли использовать pug(jade)?
Вопрос сугубо дискуссионный. Сам для себя уже ответ имею, хотел услышать альтернативные точки зрения людей из профессии. Лично я не вижу плюсов от использования Pug, он мне напоминает CoffeScript канувший в лету.
Объясните в чем его актуальность на данный момент? Спасибо.
Простой 6 комментариев
Я его использовал активно на протяжении 2х лет. И ровно столько же уже не использую, т.к настроил IDE таким образом, что никакой gulp и pug мне больше не нужен)) Кстати, лично мне pug пошел во вред и только стал тормозить процесс написания кода.
Советую вам также как можно подробнее изучить свою IDE (надеюсь вы не в sublime text делаете серьезный фронтенд :D) и необходимость в некоторых инструментах отпадет сразу же)
т.к. подходы к верстке изменились
с приходом SAP оказалось, что разные HTML препроцессоры мало где полезны.
Потом несколько раз возвращался и постепенно пришел к выводу, что если наловчиться, то некоторую пользу всё-таки извлечь можно. И важно, что со временем авторы пофиксили некоторые проблемы. Это не значит, что я полюбил Pug, но хотя бы смог использовать его без постоянного раздражения.
Практическое применение препроцессора pug
Сейчас мы рассмотрим какие возможности открывает нам препроцессор html pug, рассмотрим структуру проекта с его использованием и практическое применение.
Назначение препроцессора pug
В определённый момент времени у начинающего web разработчика на первое место выходит оптимизация процесса вёрстки, что характеризует его как профессионала своего дела. Одним из таких инструментов являются препроцессоры. В данной статье речь пойдёт о препроцессоре html pug.
Препроцессора pug позволяет расширить язык разметки html новыми функциями, о которых поговорим чуть позже. Сейчас поговорим о механизме как это работает.
Схема работы препроцессора html pug
Браузер работает исключительно с языком html и синтаксис препроцессора pug ему неизвестен. Принцип работы заключается в следующем: мы пишем код в файле с расширением pug на его синтаксисе, далее, с помощью сборщиков, мы переводим файл pug в обычный html. Этот процесс называется компиляция.
Что позволяет делать препроцессор pug
Препроцессор pug доводит обычный html до уровня языка программирования со всеми вытекающими конструкциями (ветвлениями, функциями, переменными, циклами)
Препроцессор pug позволяет:
1. Выносить повторяющиеся блоки и подключать в шаблонах
2. Использовать шаблоны.
Некоторые страницы могут иметь разные шаблоны и чтобы не пришлось повторять один и тот же код от страницы к странице следует выделить шаблоны
3. Минимизировать код за счёт синтаксиса pug
4. Миксины (функции) для повторяющегося функционала
Например для вывода меню с конкретными классами мы можем использовать миксин с параметрами
Применение препроцессора pug (Структура проекта)
Существует две папки:
1. src — разработческая папка. В которой:
— js
— less/sass
— pug
в папке pug мы создаём под папки:
— common (папка с блоками и миксинами)
— templates (шаблоны страниц)
— pages (папка с контентом страниц в которых мы подключаем шаблоны)
2. build — папка итоговой сборки с html, css, js, шрифтами и изображениями
Структура файла шаблона tempalate_main.pug:
Структура файла страницы index.pug:
Содержание файла minin.pug: