Pug+Gulp

Использовать команду pug в консоли для компиляции файлов .pug в html на практике не очень удобно, т.к при разработке проекта консоль используется для различных задач, таких, как обработка css, livereload, локальный сервер и пр. Поэтому задачу компиляции pug будет правильно включить в основную сборку проекта. В качестве сборщика лично я использую gulp, поэтому именно об этом инструменте и пойдет речь.

Для начала надо установить плагин gulp-pug при помощи команды npm install gulp-pug. Затем создадим таск для работы с gulp:

В данном случае, исходники хранятся в директории pug, а конечные файлы .pug, которые следует компилировать в pug/pages.

Среди настроек плагина gulp-pug есть опция pretty, которая позволяет задать значение отступов для форматирования получаемых html файлов. По опыту могу сказать, что при использовании данной опции код форматируется не совсем удачно. Лично меня не устраивает тот факт, что я не могу повлиять на нюансы этого форматирования, такие как возможность переноса инлайновых элементов — все они записываются в одну строку и выглядит это не совсем красиво. Поэтому задачу форматирования лучше переложить на «плечи» другого плагина, например gulp-html-beautify.
gulp-html-beautify устанавливается стандартным образом (npm i gulp-html-beautify), а таск для его использования можно описать как:

Со стандартными настройками ‘gulp-html-beautify’ будет форматировать код не на много лучше, чем при использовании pretty в gulp-pug. В частности, для того, чтобы некоторые вложенные инлайн-элементы красиво переносились на другую строку, надо их удалить из списка этих элементов. Для этого в объекте с опциями плагина надо определить свойство unformatted и в качестве значения передать массив строк с элементами, которые плагин будет считать инлайновыми. По умолчанию список этих элементов взят отсюда. Как видно, среди этих элементов есть a, img, span, input, label, svg и другие теги, которые хотелось бы увидеть отформатированными в коде, поэтому формируем массив из этих элементов, удаляем нужные и передаем его в настройки. Получается как-то так:

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

Теперь надо сказать gulp-пу, чтобы форматировал html после компиляции pug, т.е выполнял таск ‘htmlbeautify’.

Отлично, теперь на выходе получим красивый html.

В данном таске добавился pipe plumber. Это подключены плагины ‘gulp-plumber’ и ‘gulp-notify’. Они нужны для того, чтобы при получении ошибки pug, gulp не вылетал, а просто красиво сообщал бы о ней при помощи маленького окошка и звукового сигнала. Это удобно, рекомендую!

One comment

  1. Для решения этой проблемы в интернете предлагают комбинировать два Gulp плагина gulp-changed и gulp-jade-inheritance . Первый смотрит был ли изменен файл, второй определяет, где конкретный файл используется, в контексте Jade.

Leave a Reply

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