Сжатие CSS и JS штатными средствами

Наверняка каждый из вас, разбираясь в системных настройках MODX, замечал такие опции, как «compress_css» и «compress_js», которые отвечают за сжатие JS и CSS в админке. Для сжатия файлов используется специальная библиотека, которая поставляется вместе с MODX и хорошая новость заключается в том, что мы можем использовать её и для своих файлов!

/manager/min/

Пользоваться ей очень просто. Например, в шаблоне мы прикрепляем файлы CSS и JS

<link rel="stylesheet" type="text/css" href="/assets/default/css/mystyles.css"media="all"/>
<script type="text/javascript" src="/assets/default/js/myscripts.js"></script>

Таким образом файлы отправляются в браузер пользователя в неизменном виде. Теперь применим сжатие

<link rel="stylesheet" type="text/css" href="/manager/min/index.php?f=/assets/default/css/mystyles.css" media="all"/>
<script type="text/javascript" src="/manager/min/index.php?f=/assets/default/js/myscripts.js"></script>

Переменная f как раз и передаёт ссылку на наш файл. Еще одна хорошая новость заключается в том, что скрипт автоматически переписывает все пути в CSS.

Например, если в нашем CSS есть что-то такое

.body { 
background: url("../img/bg.png"); }

То скрипт автоматически перепишет путь на

.body {
background: url("/assets/default/img/bg.png"); }

Очень удобно т. к. переписывать пути нам не придется.

Также можно, например, сделать работу со сжатием настраиваемым из админки. Заходим в настройки системы и создаем новую настройку. Например:

Ключ: my.compress
Имя: Сжатие CSS и JS
Тип поля: Да/Нет
Значение: 1

После того, как настройка сделана переходим обратно в шаблон и меняем код:

<link rel="stylesheet" type="text/css" href="/assets/default/css/mystyles.css" media="all"/> <script type="text/javascript" src="/assets/default/js/myscripts.js"></script>

Т. е. перед путями к файлам мы просто добавили вот такую строчку:

Если my.compress == 1, то вывести /manager/min/index.php?f=, если не равно, то ничего не делать. Таким образом мы можем управлять сжатием файлов прямо из системных настроек.

Из недостатков библиотеки на данный момент заметил, что не подгружаются стили по http и не сжимаются стили, которые импортируются в CSS через @import. Так что если вы импортируете какие-то файлы в CSS, то ссылки на них нужно будет вытянуть в шаблон. По http ни из шаблона ни через @import файлы не подгружаются и это, кстати говоря, вполне разумно.

Вот собственно и всё. :) Ставьте лайк, если информация вам пригодилась. :)