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
Сейчас мы рассмотрим какие возможности открывает нам препроцессор 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:
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 Русаков Михаил Юрьевич. Все права защищены.
Стоит ли использовать pug(jade)?
Вопрос сугубо дискуссионный. Сам для себя уже ответ имею, хотел услышать альтернативные точки зрения людей из профессии. Лично я не вижу плюсов от использования Pug, он мне напоминает CoffeScript канувший в лету.
Объясните в чем его актуальность на данный момент? Спасибо.
Простой 6 комментариев
Я его использовал активно на протяжении 2х лет. И ровно столько же уже не использую, т.к настроил IDE таким образом, что никакой gulp и pug мне больше не нужен)) Кстати, лично мне pug пошел во вред и только стал тормозить процесс написания кода.
Советую вам также как можно подробнее изучить свою IDE (надеюсь вы не в sublime text делаете серьезный фронтенд :D) и необходимость в некоторых инструментах отпадет сразу же)
т.к. подходы к верстке изменились
с приходом SAP оказалось, что разные HTML препроцессоры мало где полезны.
Потом несколько раз возвращался и постепенно пришел к выводу, что если наловчиться, то некоторую пользу всё-таки извлечь можно. И важно, что со временем авторы пофиксили некоторые проблемы. Это не значит, что я полюбил Pug, но хотя бы смог использовать его без постоянного раздражения.
В предыдущей статье мы установили и запустили Gulp
Что такое Pug?
Синтаксис Pug
Отличия от синтаксиса HTML
Для сравнения: слева синтаксис Pug, справа синтаксис HTML
Добавляем корневой элемент html. Пока никакой вложенности нет, поэтому без отступов. Обратите внимание, что атрибуты тегов записываются в круглых скобках. Закрывающие теги не прописываются. Они будут автоматически сгенегированы
В head добавляем мета-тег кодировки документа. Атрибуты записываем в круглых скобках. Так как мета-тег кодировки должен быть внутри элемента head, то у мета-тега должен быть на один отступ Tab больше, чем у элемента head
Аналогично добавляем мета-тег для адаптивности. Если у тега несколько атрибутов, то записываем их через пробел или через запятую. Так как второй мета-тег должен быть также внутри элемента head, то у второго мета-тега также должен быть на один отступ Tab больше, чем у элемента head
Также в head добавляем тег title для названия страницы и теги link для подключения файлов стилей
Чтобы добавить класс для header, добавляем название класса через точку после названия тега, аналогично селекторам в файлах стилей CSS
Добавим logo__title c текстом. Текст записывается через пробел после названия тега или тега с классом
Добавим в header__flex еще тег nav c классом header__nav и внутри него список ul c элементами списка li, которые в свою очередь содержать ссылки a c текстом.
Каждый дочерний элемент должен иметь на один отступ Tab больше, чем родительский. Но есть еще более краткая запись, через двоеточие, которую лучше использовать только для элементов, которые содержат в себе только один дочерний элемент, например li: a(href=»») Home
Первое время рекомендую самостоятельно, пошагово, добавляя по одному элементу в index.pug, смотреть на сгенерированный index.html, чтобы для себя более подробно понять, как из синтаксиса Pug генерируется разметка HTML
Нюансы синтакcиса Pug
В Pug есть два способа это сделать.
Javascript файлы подключаем, также как и остальные теги
Шаблонизатор
Когда верстаем многостраничный сайт, при внесении изменений, например в header, необходимо открыть каждый *.html файл, который содержит header и внести эти изменения в каждом файле.
Чтобы решить данную проблему, выделим общий фрагмент кода в отдельный файл и подключим его в шаблон
Предположим, у нас есть макет сайта с тремя страницами, где есть общие блоки header и footer, а блок main будет на каждой странице отличаться.
Когда сверстали главную страницу, сохраним блоки header и footer в соответствующие файлы header.pug и footer.pug в отдельную папку includes (создаем там же, где лежит основной файл index.pug)
Отдельная папка includes для общих фрагментов верстки нужна для того, чтобы они не генерировались как отдельные html файлы, а только подключались в шаблоны страниц. Если сохраним их рядом с index.pug, то они будут сгенерированы, как отдельные страницы header.html и footer.html, а это некорректно.
Рядом с файлом index.pug сохраняем только те файлы, которые должны быть сгенерированы, как отдельные страницы. Об этом чуть ниже
header.pug
footer.pug
portfolio.pug
about.pug
При изменении header.pug или footer.pug, эти изменения будут применены сразу на всех трёх страницах
В простом примере польза шаблонизации не ощущается в полной мере, но когда реальный проект состоит более чем из 10 страниц и более 20 общих фрагментов, в которые так или иначе в процессе верстки вносятся изменения, то польза становится намного ощутимей
Возможные проблемы и их решения
В окне командной строки, где запущен Gulp, ошибки выглядят следующим образом
На скриншоте выше выделена наиболее информативная часть, где можно видеть код ошибки (code), информация об ошибке (msg), строка с ошибкой (line), файл с ошибкой (filename)
Преимущества верстки с Pug
У Pug много возможностей. Мы разобрали только базовые для ускорения и упрощения процесса верстки, но можем выделить следующие преимущества
Краткий, информативный, чистый синтаксис, не нужно следить за закрывающими тегами
Разбивка верстки на отдельные фрагменты, подключение этих фрагментов в шаблоны, и изменения в общем фрагменте применяются сразу на всех страницах, где он подключен
