Как подключить css к 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:
Препроцессор 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)
Современная сборка 2020 для frontend. Gulp4
Посмотрев на календарь, я понял, что уже 2020, а посмотрев на свою сборку, которая была с 2018 года, я понял, что пора её менять. В этой статье мы разберем структуру проекта, плагины (минимальный набор функционала) и их новые возможности, которые добавились за такое большое время. Мы разберем все моменты, чтобы новичок мог себе скачать эту сборку и начать с ней работать.
Перед тем, как вы начнете читать, хочу сказать, что материала очень много, поэтому писал только основное. Слишком очевидных вещий старался не писать, но хотел, чтобы смог понять каждый новичок. Если будут непонятные моменты, то смело переходите по ссылкам и читайте более подробную информацию, а потом снова возвращайтесь к статье. Можете задавать вопросы в комментариях, всем постараюсь ответить.
Поехали!
Начнем с главного в нашей сборке.
С pipe можно выстраивать любые цепочки.
Как вы заметили, в примерах я экспортировал функции, в старом API использовали gulp.task() :
Экспортирование функций позволяет разделять на публичные и приватные задачи.
Более подробная информация здесь, здесь и здесь.
Структура проекта
Если они не установлены, следуйте инструкциям здесь.
Создадим три папки:
Первые шаги
У НTML сильно громоздкий синтаксис, и при большой вложенности тегов сложно разобрать код. Еще одна проблема в том, что многие забывают закрывать теги. Можно возразить, что сейчас умные IDE без проблем индицируют эти проблемы, но, как правило, новички не обращают внимания, что там им говорит IDE, и еще грешат форматированием кода.
Все наши проблемы решает Pug. Одного примера будет достаточно, чтобы понять, как его использовать. Не понимаю, почему этот плагин еще повсюду не используют.
Новичкам советую обратить внимание еще на несколько возможностей:
Разделяем HTML
Разберем все более подробно.
Пройдемся по файлам:
Еще, обратите внимание, у pug есть комментарии, которые попадают в html и которые нет. Подробнее здесь.
Автоматизируем первую задачу
Последний плагин gulp-html-bem-validator — самописный плагин, сделал на скорую руку, потому что не смог найти аналогов. Очень маленький функционал, думаю, со временем буду улучшать.
Стили
Дальше мы добавим вспомогательные плагины: npm i gulp-autoprefixer gulp-shorthand gulp-clean-css gulp-sourcemaps stylelint gulp-stylelint stylelint-scss stylelint-config-standard-scss stylelint-config-standard stylelint-config-htmlacademy
Пройдемся по каждому плагину:
Pug. Начало работы. Часть вторая из двух
Синтаксис Pug
И это еще далеко не все возможности. Циклы позволяют выполнять какие-то множественные операции, например — вывести список пунктов меню. Миксины позволяют создавать многократно повторяемые блоки кода. Это практически то же самое, что и функции в языке программирования.
10. Циклы внутри шаблона
Циклы позволяют выполнять какие-то множественные операции, например — вывести список пунктов меню:
Также есть возможность перебрать ключи и значения в объекте:
C циклом each разобрались, теперь давайте посмотрим на while :
Поскольку в шаблонах допускается использование js-кода (после дефиса) — можно использовать js-цикл for :
11. Условия внутри шаблона
Выбор из нескольких вариантов с помощью case работает аналогично switch :
Условие unless является противоположностью условия if :
12. Миксины (mixin)
Миксины позволяют создавать многократно повторяемые блоки кода. Это практически то же самое, что и функции в языке программирования.
Миксин может принимать также и аргументы:
Можно установить значение аргумента по умолчанию:
Есть возможность передавать неизвестное количество аргументов:
Есть еще одна возможность (довольно сомнительная) — добавить блок после вызова миксина и управлять показом этого блока из тела миксина.
Помимо аргументов миксины также могут принимать и атрибуты:
По-моему, тоже довольно сомнительная возможность, только усложняет синаксис. Что мешает передать атрибуты дополнительным аргументом?
13. Управление пробелами
Управление пробелами в отображаемом HTML — одна из немногих сложных частей в изучении. Когда pug-код преобразуется в html-код — все пробелы и переносы строк внутри тега сохраняются. Например, добавим в начало и в конец абзаца несколько пробелов + добавим перенос строки между предложениями абзаца.
Исправить это легко:
Но тут следует помнить, что многие редакторы удаляют пробелы в конце строк при сохранении файла. Так что есть смысл использовать две вертикальные черты — в этом случае будет добавлен не пробел, а символ новой строки.
Еще один пример — как избежать примыкания вплотную текста перед и после кнопки:
14. Дополнительные возможности
Хотя атрибуты мы уже рассматривали в первой части, но есть еще дополнительные возможности, в которых сейчас и разберемся.
Атрибут class может быть не только строкой, но и массивом:
Мало того — объектом, значения которого true или false :
Атрибут style тоже может быть объектом:
И еще один момент. Строка pug-кода, которая начинается с символа расматривается как обычный текст и попадает в итоговый html-код без изменений — это дает возможность использовать нативные html-теги и html-комментрии.
Самые простые способы интеграции HTML
Меня всегда удивляло то, что в HTML нельзя подключать другие HTML-файлы. Вот если бы можно было так:
Но приведенный выше код не работает.
Многие решают данную проблему с помощью других языков программирования.
Используем PHP
Может, стоит применять PHP?
Код, приведенный выше, обеспечивает подключение на уровне сервера. Запрос будет выполнен в файловой системе на сервере. Поэтому этот способ намного быстрее, чем решение, реализуемое на стороне клиента.
Используем Gulp
Посмотрите код ниже:
С помощью этого плагина можно передавать переменные в подключение, что позволяет создавать небольшие компоненты на основе данных.
Используем Grunt
Тогда HTML сможет использовать специальный синтаксис для подключений:
Используем Handlebars
У Handlebars есть шаблоны (partials). Их необходимо зарегистрировать:
Теперь их можно использовать:
Используем Pug
Запустите код, приведенный выше, с помощью gulp-pug.
Используем Nunjucks
Если поместить код в файл index.njk, то его можно обработать с помощью простого скрипта Node в index.html:
Используем Ajax
Допустим, ваш документ выглядит следующим образом:
Можно вывести контент для шапки и подвала из соответствующих шаблонов.
Если вы создаете сайт, используя фреймворк JavaScript, то применяйте компоненты.
Используем iframes
Используйте код, приведенный ниже:
Обратите внимание, что контент в iframes использует разные DOM. Поэтому код выглядит немного странно.
Но можно заставить iframe вывести свое содержимое на родительской странице, а затем удалить «самого себя».
Используем Jekyll
Используем Sergey
Есть еще один генератор статических сайтов (SSG), который стоит упомянуть. В Sergey есть формат стиля веб-компонентов:
Используем Apache SSI
Но вам понадобится правильная конфигурация Apache, чтобы все действия были разрешены. Я старался изо всех сил, чтобы найти рабочую демоверсию, но не смог.
Используем CodeKit
Заключение
Пожалуйста, опубликуйте ваши комментарии по текущей теме материала. За комментарии, дизлайки, лайки, подписки, отклики огромное вам спасибо!
Дайте знать, что вы думаете по данной теме статьи в комментариях. За комментарии, подписки, отклики, лайки, дизлайки огромное вам спасибо!