Jekyll's tricks: минификация HTML и CSS

image

Если вас тоже раздражает беспорядочная верстка, которую производит движок Jekyll, предлагаю воспользоваться простыми и эффективными способами минифицировать css и html. Без использования плагинов Jekyll, без Gulp'а, Grunt'а, Rake и прочих приспособ.

Минификация CSS

Jekyll и GitHub Pages уже поддерживают Sass и CoffeeScript по умолчанию, поэтому можно воспользоваться возможностями оптимизации доступными с Sass.

Для этого в конфигурационном файле _config.yml надо помимо всего прочего указать:

sass:
    style: compressed

В результате получим файл стилей содержащий одну сжатую и непрерывную строку кода.

Минификация HTML

В отличии от Sass, Jekyll не поддерживает возможность для минификации сгенерированного HTML кода. Однако, есть простое решение, не сязанное с конфигурационными настройками Jekyll. Это решение предложенное Anatol Broder.

Anatol создал layout, который удаляет лишние пробелы из контента сгенерировааной HTML страницы. Чтобы применить это решение надо скачать файл compress.html и добавить его в папку _layouts. Этот файл содержит код, написанный преимущественно на liquid.

compress.html

Затем надо настроить корневой layout. Например, если в качестве корневого layout используется default.html, то в этом файле надо прописать соответствующий front matter:

---
layout: compress
---

В результате получим оптимизированный HTML код.