Minify для HostCMS - объединение и сжатие скриптов и стилей

Осенью на формуе поднимался вопрос об особенностях устройства модуля "Компрессия", входящего в коммерческие редакции HostCMS. Этот модуль, как известно, сжимает только генерируемый системой html, и никак не обрабатывает файлы стилей и скриптов.

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

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

Реализация основана на известной библиотеке Minify - http://code.google.com/p/minify/

К сожалению я так пока и не собрался реализовать это в виде законченного модуля (и вряд-ли в ближайшее время соберусь), поэтому настройка минимизации все же делается в коде макетов. Впрочем, для тех кто начинает задумываться о минимизации эти настройки не будут сложными

Итак, для начала скачиваем архив с минимизатором и распаковываем его в корневую папку HostCMS.

Потом открываем файл main_classes.php и дописываем в его конец такую строчку:

Теперь нам необходим нужных местах макета заменить старый код подключения стилей и скриптов на определение массива стилей и скриптов и вызов функции getLink(). Рассмотрим это на примере стандартного макета "Корпорация".

Вот начало исходного кода макета с ><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru"> <head> <title><?php $kernel->show_title() ?></title> <meta name="description" content="<?php $kernel->show_description()?>"/> <meta name="keywords" content="<?php $kernel->show_keywords()?>" /> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> <meta content="text/html; charset=<?php echo SITE_CODING ?>" http-equiv="Content-Type" /> <link rel="icon" href="/favicon.ico" type="image/x-icon" /> <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />

<?php $kernel->show_CSS() ?> <link rel="stylesheet" type="text/css" href="/hostcmsfiles/style.css" />

<script type="text/javascript"> var image1 = new Image(); image1.src = "/hostcmsfiles/images/shadow-b.png"; var image2 = new Image(); image2.src = "/hostcmsfiles/images/shadow-l.png"; var image3 = new Image(); image3.src = "/hostcmsfiles/images/shadow-lb.png"; var image4 = new Image(); image4.src = "/hostcmsfiles/images/shadow-lt.png"; var image5 = new Image(); image5.src = "/hostcmsfiles/images/shadow-r.png"; var image6 = new Image(); image6.src = "/hostcmsfiles/images/shadow-rb.png"; var image7 = new Image(); image7.src = "/hostcmsfiles/images/shadow-rt.png"; var image8 = new Image(); image8.src = "/hostcmsfiles/images/shadow-t.png"; var image9 = new Image(); image9.src = "/hostcmsfiles/images/ajax_loader.gif";

/* Изображения для верхнего меню */ var image10 = new Image(); image10.src = "/images/red_grad.gif"; var image11 = new Image(); image11.src = "/images/top_menu_l.gif"; var image12 = new Image(); image12.src = "/images/top_menu_r.gif"; </script> </head>

Вместо вызова метода show_CSS() и тега link для подключения файла /hostcmsfiles/style.css напишем следующее:

А вместо тегов script, подключающих внешние файлы, напишем такой код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru"> <head> <title><?php $kernel->show_title() ?></title> <meta name="description" content="<?php $kernel->show_description()?>"/> <meta name="keywords" content="<?php $kernel->show_keywords()?>" /> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> <meta content="text/html; charset=<?php echo SITE_CODING ?>" http-equiv="Content-Type" /> <link rel="icon" href="/favicon.ico" type="image/x-icon" /> <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />

<? // подключим стили $styles = array(getCSS_path_for_current_template(), 'hostcmsfiles/style.css'); echo getLink($styles, 'css'); ?> <? // подключим скрипты $scripts = array('hostcmsfiles/jquery/jquery.js', 'templates/template1/hostcms.js', 'hostcmsfiles/ajax/JsHttpRequest.js', 'hostcmsfiles/ajax/ajax.js', 'hostcmsfiles/main.js'); echo getLink($scripts, 'js'); ?>

Теперь, если мы обновим страницу в браузере, и посмотрим ее html-код, то в заголовке документа увидим следующее:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru"> <head> <title>Демонстрационный сайт системы управления сайтом HostCMS</title> <meta name="description" content="Демонстрационный сайт системы управления сайтом HostCMS"/> <meta name="keywords" content="Демонстрационный сайт системы управления сайтом HostCMS" /> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <link rel="icon" href="/favicon.ico" type="image/x-icon" /> <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />

Скрипт объединил все файлы стилей в один файл, сжал его и присвоил ему заголовок expires на год вперед, чтобы наши стили надолго закешировались в браузере у посетителя. То же самое произошло и со скриптами.

Надо отметить, что при любых изменениях в любом файле стилей или скриптов, при изменении их набора (добавлении или удалении файлов) а также при изменении порядка файлов изменится число, которым завершается url в теге script или href в теге link, что в свою очередь вызовет пересборку объедииненных файлов и их новое сжатие, так что при редактировании скриптов и стилей можно не бояться что пользователь будет использовать устаревшую версию из кеша.

В массив могут включаться только те файлы скриптов и стилей, которые находятся на том же домене что и сайт.
Обратите внимание, что в массив записываются только относительные пути к файлам, _без_начального_слеша!_
Имена файлов скриптов и стилей должны быть записаны только латиницей, в именах файлов не может быть симовола "," (запятая).
Первым элементом массива стилей должен быть вызов функции getCSS_path_for_current_template() - она добавляет в массив css-файл от текущего макета.
Второй параметр функции getLink() может принимать следующие значения: js, css, css_print и css_screen. При указании значения 'css' в теге link выводится параметр media со значение all.

Отладка. Объединение файлов в один, в ряде случаев затрудняет отладку. Здесь можно пойти двумя путями. 1. У функции getLink() есть еще третий параметр. Если в качестве третьего параметра указать true, то объединения и компрессии файлов происходить не будет, и функция getLink() вернет набор из нескольких тегов link или script, по одному для каждого файла в переданном массиве. 2. Можно перейти в раздел Константы центра администрирования, и создать там константу с названием MINIFY_IN_DEBUG_MODE, присвоив ей значение true. Активация этой константы будет переводить функцию getLink() в режим отладки на всех сайтах системы.

📎📎📎📎📎📎📎📎📎📎