Статическое сжатие css и js файлов (автоматизация процесса) / Хабр

По причине отсутствия на хостинге mod_gzip, пришлось реализовывать компрессию css и js через статическое сжатие. С другой стороны, может оно так и лучше… Но, сразу же возникает одно но. Проводить подобную операцию вручную хоть и можно, но крайне не производительно, желательно все это автоматизировать. Вот один из простеньких вариантов подобной автоматизации, реализованный на php, здесь и показан.

Для начала разберемся с поставленной задачей. Имеется локальная версия сайта (Apache, php), активно изменяемая и корректируемая. В процессе работы мы должны иметь сжатые версии css и js файлов (готовый результат при тестировании надо видеть сразу).

Значит нам надо:

Найти все файлы css и js (даже если они находятся во вложенных папках)
Создать сжатую версию (причем не каждый раз, а только если файл был изменен)
Реализовать автоматическую отдачу сервером актуальной версии файла (в сжатом виде, если это поддерживает браузер)

Конечно, сюда не сложно добавить и объединение файлов, если нужно, но здесь речь идет не об этом…

Итак, создадим страницу php (назовем ее, например, ready.php), в которой и будет находиться весь нужный нам код. Открыв эту страницу в браузере, мы запустим процесс компрессии. Если сайт динамически собирается на php, то можно прописать include('ready.php') и по мере надобности сжатие будет проводиться автоматически. Само собой, адрес в include() надо прописать реальный. Тут есть один нюанс, для предотвращения вызова этого файла на хостинге (реально на хостинге его может не быть, а вот строчку можно и забыть стереть), можно прописать некое уникальное для локального сервера условие, например:

if (mb_eregi("адрес локальной корневой папки", $_SERVER['DOCUMENT_ROOT'])) {
  include('ready.php ');
}

Адрес корневой папки у вас и на сервере вряд ли совпадет, но можно придумать и что-то другое…
В ready.php пишем такой php код:

function ready($dir) {
$dir = $_SERVER['DOCUMENT_ROOT'].$dir;
$ext = array("js","css");
for($i = 0; $i < count($ext); $i++) { search($dir , $ext[$i]);
} }
function search($dir , $ext) {
$dirH = opendir($dir);
while (($file = readdir($dirH)) !== false) {
  if ($file != "." && $file != ".." && !mb_eregi(".gzip", $file)) {
    if (filetype($dir.$file) == "dir") {
      search($dir.$file."/", $ext);
    } else {
      if (fnmatch("*.".$ext, $file)) {
        if (!mb_eregi("gzip", $file)) {
        // следующая строка покажет все найденные файлы
        //print $dir.$file."<br>";
          $adr = substr($dir.$file, 0, strrpos($dir.$file, "."));
          $timeF = filemtime($dir.$file);
          if (is_file($adr.".gzip.".$ext)) {
            $timeG = filemtime($adr.".gzip.".$ext);
          }  
          if ($timeF > $timeG) {
          // следующая строка покажет файлы которые надо сжимать
          //print $dir.$file." - GZIP<br>";
            // минимизируем (нужен yuicompressor и его реальный адрес)
            exec("java -jar yuicompressor.jar ".$adr.".".$ext." -o ".$adr.".gzipY.".$ext);
            // сжимаем
            if (is_file($adr.".gzipY.".$ext)) {
              shell_exec("gzip -9 -n -f -c ".$adr.".gzipY.".$ext." > ".$adr.".gzip.".$ext);
              unlink($adr.".gzipY.".$ext);
            } else {
              shell_exec("gzip -9 -n -f -c ".$adr.".".$ext." > ".$adr.".gzip.".$ext);
            }
} } } } } }
closedir($dirH);
}
// Здесь прописываем адрес, где файлы лежат
ready("адрес");

В результате получаем сжатые копии всех js и css файлов с именами типа name.gzip.js и name.gzip.css (если нет, то для начала, проверяем правильность адреса и права доступа).

Дальше надо обеспечить отдачу севером актуальной версии файла (без оглядки на кэш). Делается это через добавление к имени файла метки filemtime. На php это реализуется стандартно, например:

<link href="/css/css.v=<?=filemtime($_SERVER['DOCUMENT_ROOT']."css/css.css");?>.css" rel="stylesheet" type="text/css">

Готовая ссылка должна быть такого типа:

<link href="/css/css.v=1263208288.css" rel="stylesheet" type="text/css">

Это уже не раз обсуждалось и подробности можно найти по запросу, например, «разгони свой сайт, практический css/js»…

В файл htaccess добавляем правила переадресации (сразу учитываем и наличие сжатой версии):

RewriteEngine on
ReWriteCond %{HTTP:accept-encoding} gzip
RewriteRule ^(.*\.)v=[0-9.]+\.(js|css)$ /$1gzip.$2 [QSA,L]
ReWriteCond %{HTTP:accept-encoding} !gzip
RewriteRule ^(.*\.)v=[0-9.]+\.(js|css)$ /$1$2 [QSA,L]
<FilesMatch .*\.gzip\.(js|css)$>
  Header set Content-Encoding: gzip
  Header set Cache-control: private
</FilesMatch>

Вот и все.
В результате, мы продолжаем комфортно работать с js и css файлами и при этом, всегда имеем их сжатые версии, которые и скармливаются браузеру.

Статическое сжатие css и js файлов (автоматизация процесса)

Публикации

Ближайшие события