Хелпер объединяющий скрипты и стили в один файл для старичка ZF1

в 11:25, , рубрики: Zend Framework, метки:

Если вы хотите для множества добавленных скриптов:

$this->view->headScript()->appendFile('/static/js/script1.js');
$this->view->headScript()->appendFile('/static/js/script2.js');
$this->view->headScript()->appendFile('/static/js/script3.js');

вместо этого:

<script type="text/javascript" src="/static/js/script1.js"></script>
<script type="text/javascript" src="/static/js/script2.js"></script>
<script type="text/javascript" src="/static/js/script3.js"></script>

получить вот это: 

<script type="text/javascript" src="/static/cache/bff149a0b87f5b0e00d9dd364e9ddaa0.js"></script>

тогда эта статья для вас.

Инсталляция хелпера

Хелпер можно установить с помощью composer:

require: {
    "denis-isaev/zend-view-helper-head-concatenate": "*@dev"
},
"repositories":[
        {
            "type":"git",
            "url":"http://github.com/denis-isaev/ZendHeadConcat"
        }
    ]

или просто скачать/склонировать с github: github.com/denis-isaev/ZendHeadConcat

Конфигурация хелпера

В Bootsrap.php нужно добавить путь к директории с хелперами и префикс имени класса:

$view->addHelperPath(APPLICATION_PATH . '/../vendor/denis-isaev/zend-view-helper-head-concatenate/library/Iden/View/Helper/', 'Iden_View_Helper');

В apllication.ini добавить конфигурацию хелпера:

resources.view.concatenateHeadScript.enable = true
resources.view.concatenateHeadScript.cacheDir = APPLICATION_PATH "/../static/cache/"
resources.view.concatenateHeadScript.cacheUri = /static/cache/
resources.view.concatenateHeadScript.map./static = APPLICATION_PATH "/../static"

Описание параметров:

  • enable — вкл/выкл хелпера. Если этот параметр установлен в false, то хелпер вместо себя возвращает инстанс Zend_View_Helper_HeadScript и все теги script выводятся как обычно.
  • cacheDir — путь к директории в которую будут складываться кеширующие файлы.
  • cacheUri — uri директории в которую будут складываться кеширующие файлы.
  • map — здесь необходимо указать соответствие uri к директориям, в которых у вас хранятся скрипты.
    Пример:

    resources.view.concatenateHeadScript.map./uri_path = APPLICATION_PATH "/../file_path"

    означает, что для скрипта, добавленного с таким урлом:

    $this->view->headScript()->appendFile('/uri_path/js/script1.js');

    файл будет браться по пути:

    APPLICATION_PATH "/../file_path/js/script1.js"

    Более реальный пример:

    resources.view.concatenateHeadScript.map./static = APPLICATION_PATH "/../static"
$this->view->headScript()->appendFile('/static/js/script1.js');

    файл будет браться по пути:

    APPLICATION_PATH "/../static/js/script1.js"

    Если у вас в веб сервере есть несколько алиасов на несколько директорий со скриптами, то их надо описать все, чтобы хелпер смог найти файлы во всех директориях. Пример: 

    resources.view.concatenateHeadLink.map./static = APPLICATION_PATH "/../static"
resources.view.concatenateHeadLink.map./admin/static = APPLICATION_PATH "/../cms_static"

    Здесь важно, чтобы префиксы были разные. Так делать нельзя:

    resources.view.concatenateHeadLink.map./static = APPLICATION_PATH "/../static"
resources.view.concatenateHeadLink.map./static/admin = APPLICATION_PATH "/../cms_static"

    потому что в этом случае урлы, подходящие под второе правило, подходят и под первое.

Использование хелпера

В том месте, где вам необходимо добавить теги скриптов (layout или view), пишем:

<?php echo $this->concatenateHeadScript(); ?>

и на выходе в html получаем:

<script type="text/javascript" src="/static/cache/bff149a0b87f5b0e00d9dd364e9ddaa0.js"></script>

Итоговый файл bff149a0b87f5b0e00d9dd364e9ddaa0.js представляет собой объединение всех скриптов.

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

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

Еще примеры использования.

Для итогового файла можно указать тип (application/javascript) и условие (lt IE 7) по аналогии с тем, как они указываются в методе appendFile хелпера headScript:

<?php echo $this->concatenateHeadScript('application/javascript', array('conditional' => 'lt IE 7')); ?>

на выходе будет:

<!--[if lt IE 7]><script type="application/javascript" src="/static/cache/bff149a0b87f5b0e00d9dd364e9ddaa0.js"></script><![endif]-->

При добавлении скрипта с помощью headScript хелпера:

$this->view->headScript()->appendFile('/static/script_no_concat.js');

можно указать параметр noConcat, чтобы этот скрипт вставился в html отдельным тегом. В этом случае все файлы, которые были добавлены перед этим файлом, объединятся в один кешируюший файл, затем будет вставлен script_no_concat.js, затем все скрипты, которые были добавлены после него, объединятся во второй кеширующий файл, который добавится следом:

$this->view->headScript()->appendFile('/static/js/script1.js'); 
$this->view->headScript()->appendFile('/static/js/script2.js'); 
$this->view->headScript()->appendFile('/static/js/script_no_concat.js', null, array('noConcat' => true)); 
$this->view->headScript()->appendFile('/static/js/script3.js'); 
$this->view->headScript()->appendFile('/static/js/script4.js');

на выходе:

<script type="text/javascript" src="/static/js/ecb97ffafc1798cd2f67fcbc37226761.js"></script>
<script type="text/javascript" src="/static/js/script_no_concat.js"></script>
<script type="text/javascript" src="/static/js/41f6175cdfe80c87b5bad623eb90ad33.js"></script>

Во время обхода списка скриптов для объединения, хелпер проверяет тип добавленного скрипта на предмет совпадения с типом итогового файла, и если они отличаются, то текущий скрипт помечается как noConcat:

$this->view->headScript()->appendFile('/static/script1.js', 'application/javascript'); 
$this->view->headScript()->appendFile('/static/script2.js');  // дефолтный тип text/javascript
$this->view->headScript()->appendFile('/static/script3.js', 'application/javascript'); 
$this->view->headScript()->appendFile('/static/script4.js');  // дефолтный тип text/javascript

Теперь при вызове хелпера с указанным типом application/javascript:

<?php echo $this->concatenateHeadScript('application/javascript'); ?>

на выходе будет:

<script type="application/javascript" src="/static/js/ecb97ffafc1798cd2f67fcbc37226761.js"></script> <!-- тут все файлы до script2.js -->
<script type="text/javascript" src="/static/js/script2.js"></script>
<script type="application/javascript" src="/static/js/41f6175cdfe80c87b5bad623eb90ad33.js"></script> <!-- тут все файлы между script2.js и script4.js -->
<script type="text/javascript" src="/static/js/script4.js"></script>

а при вызове с дефолтным типом:

<?php echo $this->concatenateHeadScript(); ?>

на выходе будет:

<script type="application/javascript" src="/static/js/script1.js"></script>
<script type="text/javascript" src="/static/js/41f6175cdfe80c87b5bad623eb90ad33.js"></script> <!-- тут все файлы между script1.js и script3.js -->
<script type="application/javascript" src="/static/js/script3.js"></script>
<script type="text/javascript" src="/static/js/ecb97ffafc1798cd2f67fcbc37226761.js"></script> <!-- тут все файлы после script3.js -->

А что со стилями?

Для CSS стилей полностью аналогичный хелпер. Сразу конфиг и примеры.

resources.view.concatenateHeadLink.enable = true
resources.view.concatenateHeadLink.cacheDir = APPLICATION_PATH "/../static/cache/"
resources.view.concatenateHeadLink.cacheUri = /static/cache/
resources.view.concatenateHeadLink.map./static = APPLICATION_PATH "/../static"

Добавление файлов:

$this->view->headLink()->appendStylesheet('/static/css/style1.css');
$this->view->headLink()->appendStylesheet('/static/css/style2.css');
$this->view->headLink()->appendStylesheet('/static/css/style3.css');

Вызов хелпера:

<?php echo $this->concatenateHeadStylesheet(); ?>

на выходе:

<link href="/static/cache/4e0eb351038628091ac42188b1e92977.css" media="screen" rel="stylesheet" type="text/css" >

Вызов хелпера с указанием атрибута media(tv) и условием(lt IE 9):

<?php echo $this->concatenateHeadStylesheet('tv', 'lt IE 9'); ?>

на выходе:

<!--[if lt IE 9]>
<link href="/static/cache/4e0eb351038628091ac42188b1e92977.css" media="tv" rel="stylesheet" type="text/css" >
<![endif]-->

При добавлении файла стиля с $extras атрибутами

$this->view->headLink()->appendStylesheet('/static/css/style1.css', null, null, $extras);

он автоматом помечается как noConcat.

Если атрибут media(tv) какого-либо файла

$this->view->headLink()->appendStylesheet('/static/css/style1.css', 'tv');

отличается от media(application/javascript) итогового css

<?php echo $this->concatenateHeadStylesheet('application/javascript'); ?>

то такой файл помечается как noConcat.

При использовании условий

$this->view->headLink()->appendStylesheet('/static/css/style1.css', null, 'lt IE 9');

файл помечается как noConcat.

Вручную пометить файл, как NoConcat можно так:

$this->view->headLink()->appendStylesheet('/static/css/style1.css', null, null, array('noConcat' => true));

В качестве эпилога

Я использую эти хелперы в таком комплекте:

  1. В phpStorm настраиваем автоматическую минификацию скриптов и стилей с помощью File Watchers.
  2. headScript и headLink хелперами подключаем скрипты в проекте так, чтобы в development режиме вставлялись оригинальные файлы, а в production — минифицированные phpStorm-ом.
  3. Во вьюхах используем описанные в статье хелперы, при этом деактивируем их через development часть конфига.

В итоге имеем в dev режиме оригинальные файлы скриптов и стилей, подключенные каждый через отдельный тег script/link, а в production режиме — объединенные в один файл минифицированные версии.

Автор: denis-isaev

Источник

* - обязательные к заполнению поля

Главная   |  Архив новостей  |   Android  |   Google  |   Apple  |   Microsoft  |   Информационная безопасность  |   Веб – разработка
Публикации RSS  |  Комментарии RSS
https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js