Препроцессор pug(jade). Часть 1

05.01.2018

Препроцессор pug(jade). Часть 1

Pug.js или jade — препроцессор html с большими возможностями. Pug написан на node.js и обладает высокой производительностью.
Зачем использовать pug и какие преимущества он даёт?

1. Повышение скорости написания html-кода. Синтаксис pug значительно более краток, чем обычный html. Например, эквивалент записи

Как видно, запись разметки в синтаксисе pug лаконична и наглядна, по сравнению с чистым html.

2. Модульность.
Pug предоставляет возможность вынесения блоков кода в виде модулей и подключение их на различных html страницах. Это очень удобно при верстке многостраничных проектов. Например, очень часто возникает ситуация, когда есть множество страниц, у которых одинаковый блок кода (шапка, футер, меню и т.д). И, однажды, возникает необходимость внести правку в код. При использовании pug, достаточно внести изменения в одном месте и они автоматически применятся ко всем страницам, а в случае чистого html пришлось бы вручную редактировать множество страниц, что затратно по времени.

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

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

Итак, давайте разберемся, как начать использовать pug.

1. Установка pug.

Для установки pug необходим пакетный менеджер npm, который входит в состав nodejs. Если у вас не установлен nodejs, достаточно зайти на сайт nodejs.org и скачать установщик. Установка nodejs не отличается от установки обычных программ.

После установки nodejs, потребуется открыть консоль и написать команду:

Затем, если вы установили последнюю версию nodejs, выполнить команду

Если установка прошла корректно, то pug готов к использованию. Теперь можно попробовать написать первую страничку с его помощью. Для этого создайте файл с расширением pug (например index.pug) и напишите в неё следующий код:

Чтобы скомпилировать этот файл, надо перейдите в консоли в директорию с файлом и выполните команду pug index.pug (или pug название файла). В директории с файлом должен появиться скомпилированный файл index.html. Но если вы посмотрите на содержимое этого файла, то увидите, что он сгенерирован без форматирования и исходный код записан в одну строку. Для того, чтобы файл создался в нормальном удобочитаемом виде, необходимо запустить команду для генерации с флагом —pretty, т.е

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

Для того, чтобы не запускать команду каждый раз можно запустить генерацию с флагом -w (watcher), и файл будет сгенерирован заново всякий раз, как вы сохраните изменения в нем.
Следует так же отметить, что для отступы в файлах .pug должны задаваться либо пробелами, либо табами. Если в одном месте вы используете пробел, а в другом символ табуляции, то при генерации произойдет ошибка.

Отлично, мы создали первый файл. Теперь давайте подробнее поговорим о синтаксисе.

2. Синтаксис pug

Синтаксис pug крайне прост. Достаточно просто взглянуть на пример выше, как сразу все становится понятно.

Это, пожалуй, и все, что касается разметки. О синтаксисе циклов, условий и пр. поговорим немного позднее.

3. Подключение модулей

Как уже было упомянуто, одним из несомненных достоинств pug является возможность подключения модулей — одного и того же куска кода к различным файлам. Делается это очень просто. Допустим, у нас есть разметка страницы следующего вида:

Шапку и футер мы хотим использовать на других страницах, поэтому вынесем их разметку в отдельные файлы, разметку шапки в файл modules/header.pug, а разметку футера — в файл modules/footer.pug

Теперь там, где мы хотим выводить шапку напишем include modules/header, а на месте футера include modules/footer. Расширение указывать необязательно.
Т.е для подключения блока кода необходимо написать include путь_к_файлу/файл.

Итак, нам уже известно вполне достаточно, чтобы начать писать код html с помощью препроцессора pug. В этой статье я рассказал о самых основах препроцессора pug (jade). В действительности его возможности огромны и о некоторых из них пойдет речь в последующих статьях.

Читайте также:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *