Все хотят быстрые сайты, поэтому необходимо снижать количество запросов на сервер и минифицировать оставшиеся объёдиненные файлы.

Если у вас блог на Jekyll, то вы не исключение. Чтобы иметь эту возможность, придётся чуть-чуть поменять структуру вашего сайта.

Для начала создайте файл _layouts/compress.html. Этот файл будет шаблоном для минификации ваших файлов. strip_newlines и replace — стандартные фильтры. В данном случае я настроил свои фильтры на минификациюю CSS-файлов. Так как блок с комментарием для красоты, то вы можете его не использовать.

/** * @author Ваше имя и фамилия * @mail awesomemail@gmail.com * @twitter @awesometwitter */ {‍{ content | strip_newlines | replace:' ','' | replace:' ','' }} 

Затем перенесите файлы из папок js/ и css/ в папку _includes.

После этого создайте файлы css/styles.min.css и js/scripts.min.js и перечислите в каждом из них соотвествующие конкатенируемые файлы. Эти файлы будут выглядить примерно так, как показано ниже. Блок обрамлённый --- включает YAML режим для этого файла. А строка layout: compress указывает на то, что должен использоваться шаблон compress, созданный нами ранее.

--- layout: compress --- {‍% include css/normalize.css %} {‍% include css/helper.css %} {‍% include css/print.css %} {‍% include css/main.css %} 

После этого в шапке вашего jekyll сайта достаточно будет указать ссылку только на минифицируемый файл:

<link href="/css/styles.min.css" rel="stylesheet" /> 

В моём случае этот файл выглядит примерно так:

Итоги

Весь CSS быстро грузится один раз одним маленьким файлом. Сайт стал быстрее, пользователи счастливее.

Редактировать / Начать обсуждение