#frontend #js
В Студии мы постоянно стремимся оптимизировать работу, применяя различные инструменты разработки. С недавних пор мы внедрили в корпоративные сборки для статической верстки шаблонизатор Pug.
Его основное преимущество — поддержка использования JavaScript прямо в синтаксисе шаблонов. Можно применять большое количество языковых конструкций, например переменные, классы или функции. Есть возможность делать код более модульным, разделяя его на компоненты — шаблоны и миксины.
Более того, стандартный функционал pug-шаблонов можно самостоятельно расширять. И далее мы расскажем как.
Например, нам очень хочется использовать npm-пакет classname в наших шаблонах. Реализуем его поддержку.
Поскольку Pug компилируется с помощью JavaScript в HTML, мы можем добавить необходимый функционал на этапе сборки проекта, а затем использовать его в шаблонах.
В нашем примере для автоматизации процесса расширения функционала будем использовать таск-менеджер Gulp. Для начала необходимо установить пакет gulp-pug и сконфигурировать его, как описано в документации. Затем с помощью опции locals плагина gulp-pug необходимо определить импортируемые js-переменные или функции, в нашем случае функцию cn. В шаблоне мы сможем вызывать ее из глобального контекста:
header(class=cn('header', { header_auth: auth }))Пример gulp-задачи, реализующей описанное выше расширение функционала шаблонов, можно посмотреть здесь.