Pug jade что это

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 / Jade

Отредактировано: 29 Июля 2018

Препроцессор Pug изначально назывался Jade, поэтому теперь можно встретить разные названия с одним и тем же описанием.

Комментарии (Comments)

Доктайп (Doctype)

При создании собственного доктайпа следует учесть что:

Тэги (Tags)

Pug подразумевает что каждая новая строка начинается с тега, а вложенность определяется с помощью отступов. Пробелы в начале и конце тегов удаляются.

Атрибуты (Attributes)

Для записи id и классов можно использовать короткую запись:

Атрибуты похожи на html, однако их значения — это обычный JavaScript. Поэтому, если вы вставите туда выражение JS, оно сработает.

Логический тип данных

Запись &attributes

Может использоваться для разбивания объекта с атрибутами на части. Символы при этом не экранируются, если используются вне миксинов.

Case (Case)

Сокращенный вариант JS условия switch.

Код (Code)

Пуг позволяет обрабатывать JS код, разделяя его на 3 типа: буферизированный, небуферизированный, неэкранированный буферизированный.

Небуферизованный код ничего не добавляет к выводам и начинается с —

Буферизированный код начинается с =, он вычисляет JS и выводит результат. Для безопасности html символы экранируются.

Условия (Conditionals)

Условия if, else if, else

условие unless (отрицательный if)

Фильтры (Filters)

Фильтры позволяют использовать другие языки в шаблонах Pug. Все модули JSTransformer могут использоваться в качестве фильтров Pug. Популярные фильтры: :babel, :uglify-js, :scss и :markdown-it.

Можно использовать как уже существующие, так и собственные фильтры.

Для вставки опций в фильтры заключите их в скобки записав после вызова фильтра: :less(ieCompat=false).

Если вы хотите использовать CoffeeScript и Markdown (используя Markdown-it renderer) в шаблоне Pug, сначала убедитесь, что эти функции установлены:

Запись условия с фильтрами:

Фильтры отображаются во время компиляции. Это делает их быстрыми, но это также означает, что они не могут поддерживать динамический контент или параметры.

Инлайновая запись

Использование вместе с include

Вложенные фильтры

Фильтры применяются в обратном порядке.

Пользовательские фильтры

Cобственные фильтры добавляются через опцию filters.

Включения (Includes)

Includes позволяет включать содержимое одного файла в другой. Если подключать не pug файл, то в результат вставится содержимое файла.

Наследование (Inheritance: Extends and Block)

Pug поддерживает шаблонное наследование, реализуемое с помощью ключевых слов block и extends.

block — блоки кода, которые можно перезаписывать. В блок можно включить контент «по умолчанию», тогда он будет доступен на всех страницах к которым подключается, если его не перезапишут принудительно.

Так выглядит объявление блоков:

Команда extends добавляет данные из основного макета к новой странице.

Так выглядит дополнительный файл к которому подключается основная разметка блоков. Блок scripts перезаписывается, блок content заполняется данными, блок foot остается неизменным:

Block append / prepend

Изменение и расширение данных в блоках.

block name — блок с именем. При размещении на другой странице текста в блоке — значение по умолчанию затрется.

block appends name — добавить к блоку. При размещении на другой странице значение прибавится к значению по умолчанию.

block prepends name — указывает что в этом блоке надо обрабатывать условия appends блока.

Пример изменения текста переменной в блоке

Интерполяция (Interpolation)

Строковая интерполяция, экранируемая

Строковая интерполяция, не экранируемая

Интерполяция тегов

Интерполяция и пробелы

Итерации (Iteration)

Pug поддерживает основные методы итераций: each, for и while.

while

Миксины (Mixins)

Миксины позволяют создавать повторяющиеся блоки

Преобразуются в функции и могут принимать аргументы

Миксины могут принимать блоки pug контента, для последующего преобразования

Двойные блоки в миксине можно создавать так

Миксины могут принимать неявные аргументы, которые берутся из аргументов переданных в миксин

Миксины можно использовать с &attributes

Поскольку Pug пытается определить, является ли содержимое скобок атрибутами или аргументами, лучше использовать запись +link()(class=»btn»), во избежании возможных ошибок. Синтаксис +link(class=»btn» ) также действителен, но не рекомендован.

Можно указать бесконечное количество аргументов, используя синтаксис “rest arguments”

Переменная в атрибуте миксина:

Миксин в атрибуте миксина:

Миксины в атрибуте миксина:

Простой html текст (Plain Text)

Для вывода html без обработки шаблонизатором есть несколько способов:

Обернуть текст тегом

Использовать html занимающий всю строку

С использованием префикса | (pipe)

Источник

Стоит ли использовать 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 много возможностей. Мы разобрали только базовые для ускорения и упрощения процесса верстки, но можем выделить следующие преимущества

Краткий, информативный, чистый синтаксис, не нужно следить за закрывающими тегами

Разбивка верстки на отдельные фрагменты, подключение этих фрагментов в шаблоны, и изменения в общем фрагменте применяются сразу на всех страницах, где он подключен

Источник

Html шаблонизатор Pug, документация на русском

Всем привет! Давно хотел написать хорошую развернутую документацию про Html препроцессор Pug и вот этот момент настал. Я довольно давно использую Pug в своей работе и просто балдею от него . Я не понимаю, как можно сегодня верстать и писать обычный нативный Html-код. Это же так нудно и долго.

Вообще Pug это примерно тоже самое, что и препроцессор Sass. Я имею ввиду тут логику, хотя и сам синтаксис немного похож. Если вы поняли, чем хорош Sass, то Pug вам понравится еще больше.

Pug — это шаблонизатор Html, написанный на языке JavaScript для Node.js. После интерпретации сервером синтаксис Pug превращается в Нtml код. Старое название Pug — Jade. Подробности не знаю, но у разработчика возникли проблемы с авторскими правами и проект был переименован в Pug. Так что, если встретите упоминание Jade, знайте, что речь идет о Pug.

Начало работы

Для того, чтобы работать с Pug вам необходим установить Node.js. Скачать его можно с официального сайта nodejs.org. После установки открываем консоль (в Windows это комбинация клавиш Win + R) и вводим команду:

Дождитесь пока установщик завершит установку. Чтобы проверить, что все прошло удачно введите команду в консоли:

Вам должно выдать последнюю версию Pug, например — 6.13.4.

Далее запускаем еще одну команду:

Если все прошло без ошибок, то можно начинать работу.

Чтобы скомпилировать все это в Html необходимо в консоли перейти в директорию с данным файлом и запустить команду:

В итоге получим в index.html

Синтаксис Pug

Код Pug достаточно прост. Он не имеет угловых скобок и закрывающих тегов. Вложенность элементов определяется отступом — Tab или пробел.

Все это делает код лаконичным и легкочитаемым. И самое главное — ускоряется скорость написания кода.

Как было уже отмечено, синтаксис Pug чем-то напоминает синтаксис Sass:

Это в основном тот список, что нужно знать, чтобы начать работать с Pug. Сюда я бы добавил еще то, что атрибуты указываются в круглых скобках. Давайте теперь по порядку.

Теги, классы, индификаторы

Давайте напишем небольшую разметку, например маркированный список.

Html

Теперь добавим классы нашей разметке

Html

Добавим тегу ul еще и индификатор

Html

Если обратили внимание, текст элементу списка задается через пробел. Об этом поговорим более подробнее ниже.

Атрибуты

Для того, чтобы указать атрибут элементу разметки достаточно указать его в круглых скобках.

Html

Если необходимо указать несколько атрибутов, то указываем их через запятую или пробел. Я больше предпочитаю пробел.

Html

Если атрибутов много, то можно указать их многострочными линиями

Если с атрибутами нам необходимо указать класс и/или индификатор, то указываются они до атрибутов.

Класс или Id можно указать также, как обычный атрибут.

Текст

Как было уже сказано, текст элементу указывается через пробел.

Можно указать и через символ | :

Если у вас много текста, например, большой абзац, то есть вариант написать текст, указав точку в конце тега и через отступ вложенностью указываем текст. После точки не должно быть никаких символов и пробелов.

Также можно указывать обычные html теги внутри текста.

Комментарии

Однострочные комментарии начинаются с символов — //

Html

Если не хотите выводить комментарии в итоговом html коде, а в pug-файлах они нужны, то достаточно сразу после слешей добавить дефис.

Также можно выводить и многострочные комментарии.

Html

Doctype

В Html5 doctype указывается следующим образом:

Html

Если вы хотите указать doctype для различных типов документов, то можете почитать более подробно в официальной документации как это сделать.

Подключения (include)

Большим достоинством Pug является возможность подключения отдельных модулей кода. То есть можно выносить в отдельные фрагменты кода целые области сайта. Например, можно вынести отдельно header, sidebar, content, footer и все это собрать в одном индексном файле. Такой подход сделает наш код удобочитаемым и в случае правок достаточно изменить в одном месте.

Html

Как видим код файла index.pug намного удобнее читать и ориентироваться в нем.

Также есть возможность подключать отдельные файлы стилей и скриптов.

Циклы

Циклы или итерации в Pug позволяют выполнять какие-то множественные операции, написав всего лишь несколько строк кода. Например, можно вывести список пунктов меню, написав код итерации следующим образом:

Html

Есть возможность также перебрать ключи в объекте.

Html

Вместо each вы можете использовать for в качестве псевдонима.

Html

Как видим, циклы это обычный JavaScript и ничего сложного тут нет, хватает всего лишь знаний основ данного языка программирования.

Миксины

Миксины позволяют создавать многократно повторяемые блоки кода. Это практически тоже самое, что и функция в языке программирования.

Как видим, чтобы вызвать миксин необходимо поставить символ + и без пробела написать название миксина. Если код миксина выносится в отдельный файл, то в том документе, где он вызывается необходимо его подключить через include в верхней части документа.

Аргументы

Миксин может принимать также и аргументы.

У нас есть также возможность установить значения аргументов по умолчанию. Делается это примерно также, как и установка параметров функции по умолчанию в ES6 (ECMAScript 6).

Блоки миксинов

Миксины могут выступать в качестве блоков или контейнеров, которые могут содержать различный контент.

Атрибуты

Помимо аргументов миксины также могут принимать и атрибуты.

Неизвестное количество аргументов

В миксинах Pug есть возможность передавать неизвестное количество аргументов, используя синтаксис «rest arguments«.

Наследование шаблонов

Pug позволяет создавать шаблоны страниц, то есть в последующем любую страницу сайта можно создать по заранее созданному шаблону. Таких шаблонов может быть сколько угодно.

Шаблон Pug

Страницы Pug

Из примера выше видим, что страницы «Главная» и «О нас» сделаны по одному шаблону. Ориентироваться в коде на таких страницах намного проще, ведь здесь только основное его содержимое.

Содержимое блока полностью заменяется дочерним шаблоном, но что, если нам необходимо просто добавить что-либо к содержимому по умолчанию?

Block append / prepend

block prepend — добавляет в начало списка, block append — в конец списка. Вообще слово block можно опустить, например — append scripts. Он является не обязательным.

Вообще следует отметить, что создание шаблонов — это мощная функция, которая позволяет разделять наш проект на простые и сложные конструкции страниц. Так что пользуйтесь данной возможностью.

Условия

Pug работает на основе JavaScript поэтому есть возможность использовать условия при написании кода, как и в любом другом языке программирования.

Интерполяция

В Pug существует несколько видов вывода переменных. Давайте обратимся к примеру.

Более подробнее про вывод переменных можете почитать в документации.

Конструкция Case

Можно записать данный код более компактно.

Pug позволяет использовать встроенный JavaScript код в ваших шаблонах. Существует 3 вида кода: небуферизированный, буферизированный и неэкранированный буферизированный.

Небуферизированный код

Небуферизированный код можно указать и как блок.

Буферизированный код

Неэкранированный буферизированный код

Фуф… Не маленькая получилась статья. На этом скорее всего завершу. Пока писал данную документацию сам узнал много чего новенького .

На этом все… Все спасибо за терпение (если дочитали до конца ). Пишите комменты, с удовольствием отвечу на вопросы. До встречи в других постах!

Источник