Добро пожаловать на сайт SEDBY

Минификация и сжатие CSS и JS ресурсов в Cotonti Siena

Популярные запросы: тема Omnis, плагин Pagelist, Cotonti 0.9.24.2, ЧПУ, Font Face

  • 51 просмотр
  • 7 марта, 2025
  • Обновлено: 7 марта, 2025
  • admin
  • Время чтения: 3 минуты
  • 2 (Подробно)
Минификация и сжатие CSS и Javascript файлов

Сегодня рассмотрим такой любопытный вопрос, как минификация или сжатие JavaScript- и CSS-ресурсов. Не секрет, что поисковые системы крайне лояльно относятся к сайтам с быстрой скоростью загрузки. Одним из факторов, влияющих на нее, является минификация файлов со скриптами и стилями. 

Конечно, есть еще серверный GZIP, но сжатые CSS и JS ресурсы вам никогда не помешают.

Как Cotonti Siena минифицирует JavaScript и CSS ресурсы

Задачи по минификации в среде Cotonti Siena выполняет “ресурсная функция” minify(). Ее вызов прост:

Resources::minify($code, $type);

Аргумент $code передает функции код для минификации, а $type сообщает ей один из двух типов: ‘js’ или ‘css’. По умолчанию $type имеет значение ‘js’.

С вызовом функции minify() все просто и понятно, а вот на алгоритме ее использования и примерах остановимся подробнее.

Начнем с аргумента $code. Его необходимо сформировать из содержимого минифицируемого ресурса. Для примера будем использовать файл с пользовательскими скриптами, размещаемый в папке themes/nemesis/js/js.js и переменную $minified_code:

$minified_code = Resources::minify(file_get_contents('themes/nemesis/js/js.js'), 'js');

Теперь надо решить, куда направить сжатый JS-код. Используем папку datas/minified, которую предварительно добавим в файл исключений .gitignore:

/datas/minified/*
!/datas/minified/index.html

Если вы не используете Git, данный шаг можно пропустить. Ну а наш код теперь будет выглядеть так:

$minified_code = Resources::minify(file_get_contents('themes/nemesis/js/js.js'), 'js');
file_put_contents('datas/minified/js.min.js', $minified_code);

В принципе, на этом как бы и все. Но возникает вопрос: а надо ли каждый раз минифицировать наши скрипты? Предположим, вы хотите вручную удалять сжатый файл для его повторного создания. Тогда наш код будет выглядеть примерно так:

!file_exists('datas/minified/js.min.js') && file_put_contents('datas/minified/js.min.js', Resources::minify(file_get_contents('themes/nemesis/js/js.js'), 'js'));

Уже неплохо. Но можно исключить ручное удаление, сравнив даты создания обоих файлов. Дата исходника всегда должна быть меньше даты сжатого файла. Так что получаем финишный код:

$res_src = 'themes/nemesis/js/js.js';
$res_min = 'datas/minified/js.min.js';
(filectime($res_src) > filectime($res_min)) && file_put_contents($res_min, Resources::minify(file_get_contents($res_src), 'js'));

Теперь минифицированная версия исходника со скриптами будет создаваться и перезаписываться только после его изменения.

Вместо заключения

Как видим, процедура сжатия JS / CSS ресурсов не является сложной, даже для пользователя с начальными знаниями PHP. Напомним, что Котонти на уровне системных настроек умеет сжимать пользовательские файлы стилей и скриптов, указанные в ресурсном файле темы. Все же ручное управление во многих ситуациях предпочтительно, особенно если речь идет о загрузке подобных ресурсов в плагине или модуле.

Выбор хука для размещения приведенного выше кода оставляю за вами – решайте сами, где вам необходимо выполнить минификацию.

Со всеми вопросами в комментарии, на форум или в сообщество Cotonti. Веселой вам разработки!

Кстати, в прошлый раз мы рассказывали о подключении "коробочного" Bootstrap для разработки сайта на Cotonti Siena.

Аватар

Спасибо за статью! Применил ее для сжатия скриптов с картами и своими функциями. Раньше приходилось пользоваться Code Beautify и подобными сервисами.

Новый комментарий

Имя:
Для редактирования комментария осталось 10 минут
Блок пользователя
Регистрация на нашем сайте позволит вам общаться на форумах и получить доступ к другому полезному функционалу
Вы вошли как Гость