Просмотр исходного текста страницы Минимизация CSS и JavaScript

 [[category:Написание кастомных макросов]]
<p>
Прежде всего, давайте определимся, зачем нам сжимать CSS и JavaScript код? Сжатие CSS и JavaScript уменьшает время загрузки страницы. Если проект мал, то его применение не целесообразно. Однако, когда Вы работаете над большим проектом, сжатие может здорово уменьшить время загрузки страницы, поскольку удаляются комментарии из кода, код пишется в одну строку - удаляется "белое пространство" (пробелы и переносы строк). Имейте в виду, если вы действительно хотите увеличить производительность веб-сайта, после стадии разработки Вы должны пойти еще дальше и использовать GZIP сжатие и кэширование ваших файлов.
</p>
<p>
Чтобы не использовать сторонние сервисы или не производить сжатие вручную - напишем кастомные макросы, которые будет сжимать CSS и JavaScript код соответственно. Текст макросов разместим в файле "/classes/modules/content/__custom.php", после строки "//TODO: Write here your own macroses".
</p>
<p style="text-align: right">
'''Листинг 1. Код макросов для сжатия CSS и JavaScript'''
</p>
<source lang="PHP">
/*
  @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>';
}
</source>
<p>
После добавления макросов, нам необходимо добавить разрешения для них. Для этого в той же папке создаётся файл "permissions.custom.php" со следующим содержанием:
</p>
<p style="text-align: right">
'''Листинг 2. Права для макросов'''
</p>
<source lang="PHP">
<?php
  $permissions = Array(
    'content' => 
      Array('getMinimizedss', 'getMinimizedJs')
  );
?>
</source>
<p>
На входе у макросов два параметра: директория расположения и список файлов. Разделителем в списке служит символ "|". Код из указанных файлов объединяется и затем проходит минимизацию, т.е. на выходе получается текст в одну строку, без символов табуляции и пробелов.
</p>
<p>
Примеры использования макросов в TPL и XSLT:
</p>
<p style="text-align: right">
'''Листинг 3. Использование макросов в TPL'''
</p>
<source lang="PHP">
%content getMinimizedCss('css/', 'header|center|footer')%
%content getMinimizedJs('js/', 'hello|world')%
</source>
<p style="text-align: right">
'''Листинг 4. Использование макросов в XSLT'''
</p>
<source lang="PHP">
<xsl:value-of select="document(concat('udata://content/getMinimizedCss', 'css/', 'header|center|footer'))" 
disable-output-escaping="yes" />
<xsl:value-of select="document(concat('udata://content/getMinimizedJs', 'js/', 'hello|world'))" 
disable-output-escaping="yes" />
</source>