Внедрение Minify на сайте

Несколько раз упоминал про оптимизацию JS и CSS, и даже написал статью, в которой рассказал, как эти методы применяются мною на практике. Несколько раз натыкался на материалы, где упоминались программы оптимизаторы, в том числе от Google, которые вебмастера внедряют в сайты для автоматизации этого процесса, но руки до них не доходили. Недавно у одного из разработчиков Modx промелькнуло, что он использует какой-то комплексный минифаер (minify), который был сразу загружен, изучен и внедрен.

Сам пакет Minify можно получить из репозитория проекта (https://github.com/mrclay/minify), на момент написания статьи текущая версия проекта 2.2.0. Разбирать мы будем именно эту версию программы. После того, как нами был получен пакет, нам нужно взять из него папку min и закачать ее на сервер со всеми вложенными в нее файлами. После небольшой настройки мы получим полноценный минифаер, который будет делать всю работу по оптимизации JS и CSS за нас.

Как же работает минифаер?

В папке min (т.е. папке, которую мы закачали на сервер) находится тело программы и ряд библиотек, которые отвечают за минимизацию и оптимизацию передаваемого им кода. Управление осуществляется через передачу GET параметров к скрипту, которые указывают, что именно минифаер должен сделать.

Итак, сначала проверим работу минифаера. Для этого нам достаточно вызвать минифаер со вложенным тестовым файлом:

http://www.example.ru/min/?f=/min/quick-test.js

, как только мы увидим, что код JS скрипта идет в одну строку, значит минифаер нормально работает. Так же можем проверить работу Minify на CSS, для этого так же пользуемся тестовым файлом:

http://www.example.ru/min/?f=/min/quick-test.css

, после того как мы убедились, что все работает как надо, удаляем тестовые файлы и переходим к конфигурации. Мною данный минифаер используется для объединения и оптимизации групп файлов, поэтому я сразу иду править groupsConfig.php. В программе есть встроенный билдер, который позволяет произвести настройки прямо из него, но мне проще сделать все вручную. В данном файле в виде PHP массива перечислены именованные группы файлов. Чтобы сделать свою группу необходимо добавить в массив данные своего проекта, например:

'js' => array('//tpl/jquery.min.js','//tpl/functions.min.js',),
'css' => array('//tpl/styles.css',),

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

#для файлов javascript
http://www.example.ru/min/?g=js

#для файлов стилей
http://www.example.ru/min/?g=css

Теперь данные вызовы достаточно указать в заголовке страницы сайта:

<link rel="stylesheet" href="/min/g=css" type="text/css" />
<script type="text/javascript" src="/min/g=js"></script>

и проверить работоспособность сайта, скриптов и стилей, но как правило проблем с работоспособностью не бывает. Все, теперь вы знаете как автоматизировать процесс минимизации и оптимизации JS и CSS файлов своих проектов.