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, nunjacks и т.д.) если можно верстать прямо в php?
Возьмем следующую ситуацию.
Задание: сверстать psd макет из 10 страниц и посадить на WordPress.
Вижу 2 варианта:
1) Сверстать, к примеру, в pug. Вручную перенести html в php файлы и заменить куски html кода на php (функции wp);
2) Попробовать прикрутить к pug какой-то инструмент позволяющий использовать php и функции wp в pug и на выходе получить php файлы.
Не проще тогда установить wp, создать стартовую тему и верстать сразу в php файлах темы?
Простой 1 комментарий
А вообще используют для простоты, секьюрности и возможности работы над шаблонами человеком, который ни в зуб ногой в php.
Безопасность. Это автоматическое экранирование в зависимости от контекста. Работа на повышение привилегий: только в тех случаях, когда нужно работать без экранирования, это указывается явно.
Удобная работа с блоками. Наследование шаблонов сильно упрощает работу с ними.
Использование своего упрощенного синтаксиса.
Можете попробовать шаблонизатор Blade от Laravel: это развитие PHP-шаблонизатора через макросы, является промежуточным вариантом между PHP и нормальными шаблонизаторами.
Но лучше используйте Twig, если хотите хорошо и не принимаете полумеры.
Стоит ли использовать 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:
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 вида кода: небуферизированный, буферизированный и неэкранированный буферизированный.
Небуферизированный код
Небуферизированный код можно указать и как блок.
Буферизированный код
Неэкранированный буферизированный код
Фуф… Не маленькая получилась статья. На этом скорее всего завершу. Пока писал данную документацию сам узнал много чего новенького 
.
На этом все… Все спасибо за терпение (если дочитали до конца ). Пишите комменты, с удовольствием отвечу на вопросы. До встречи в других постах! 