Минимизация CSS и JavaScript

Актуально для версии 2.9

Прежде всего, давайте определимся, зачем нам сжимать CSS и JavaScript код? Сжатие CSS и JavaScript уменьшает время загрузки страницы. Если проект мал, то его применение не целесообразно. Однако, когда Вы работаете над большим проектом, сжатие может здорово уменьшить время загрузки страницы, поскольку удаляются комментарии из кода, код пишется в одну строку - удаляется "белое пространство" (пробелы и переносы строк). Имейте в виду, если вы действительно хотите увеличить производительность веб-сайта, после стадии разработки Вы должны пойти еще дальше и использовать GZIP сжатие и кэширование ваших файлов.

Чтобы не использовать сторонние сервисы или не производить сжатие вручную - напишем кастомные макросы, которые будут сжимать CSS и JavaScript код соответственно. Текст макросов разместим в файле "/classes/modules/content/__custom.php", после строки "//TODO: Write here your own macroses".

Листинг 1. Код макросов для сжатия CSS и JavaScript

/*
  @param String
    $path - директория расположения файлов
  @param String
    $files - список файлов для сжатия (символ "!" - разделитель)
 */
public function getMinimizedCss($path, $files) {
  $files = explode('!', $files);
  $content = '';
  foreach($files as $file) {
    $filename = $path.$file.'.css';
    if(file_exists($filename))
      $content .= file_get_contents($filename);
  }
    
  $content = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $content);
  $content = str_replace(array("\r\n", "\r", "\n", "\t", '  ', '    ', '    '), '', $content);
    
  return '<style>'.$content.'</style>';
}

/*
  @param String
    $path - директория расположения файлов
  @param String
    $files - список файлов для сжатия (символ "!" - разделитель)
 */
public function getMinimizedJs($path, $files) {
  $files = explode('!', $files);
  $content = '';
  foreach($files as $file) {
    $filename = $path.$file.'.js';
    if(file_exists($filename))
      $content .= file_get_contents($filename);
  }
    
  $content = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $content);
  $content = str_replace(array("\r\n", "\r", "\n", "\t", '  ', '    ', '    '), '', $content);
    
  return '<script type="text/javascript">'.$content.'</script>';
}

После добавления макросов, нам необходимо добавить разрешения для них. Для этого в той же папке создаётся файл "permissions.custom.php" со следующим содержанием:

Листинг 2. Права для макросов

<?php
  $permissions = Array(
    'content' => 
      Array('getMinimizedCss', 'getMinimizedJs')
  );
?>

На входе у макросов два параметра: директория расположения и список файлов. Разделителем в списке служит символ "!". Код из указанных файлов объединяется и затем проходит минимизацию, т.е. на выходе получается текст в одну строку, без символов табуляции, пробелов и комментариев.

Примеры использования макросов в TPL и XSLT:

Листинг 3. Использование макросов в TPL

%content getMinimizedCss('css/', 'header!center!footer')%
%content getMinimizedJs('js/', 'hello!world')%

Листинг 4. Использование макросов в XSLT

<xsl:value-of select="document(concat('udata://content/getMinimizedCss/', '(css/site/)/', 'header!center!footer'))/udata" 
disable-output-escaping="yes" />
<xsl:value-of select="document(concat('udata://content/getMinimizedJs/', '(js/site/)/', 'hello!world'))/udata" 
disable-output-escaping="yes" />

Важно. Обращаем Ваше внимание на то, что имена файлов указываются без расширения. Макросы добавляют его автоматически. Если Вы используете макросы в XSLT, то при указании папки, где находятся файлы, путь необходимо оборачивать в круглые скобки (как это сделано в примере), иначе шаблонизатор считает, что Вы указываете несколько параметров, а не один, т.к. в XSLT параметры разделяются слешом.