Главная
Блог разработчиков phpBB
 
+ 17 предустановленных модов
+ SEO-оптимизация форума
+ авторизация через соц. сети
+ защита от спама

Bender: идейный борец за минимальность CSS / Javascript

Anna | 31.05.2014 | нет комментариев

Не так давным-давно на Прогре теснее была статья про комбинатор CSS / Javascript файлов: плагин для Smarty — Combine. Дело это пригодное, от того что разрешает ускорить загрузку страниц и снизить нагрузку на сервер. Тогда возникла идея сделать свой комбинатор минимизатор, тот, что дозволено было бы применять не только в планах на Smarty, а вообще в всяких. Идея превратилась в Bender.

Первоначально задача состояла в оптимизации загрузки CSS / Javascript одного плана, основанного на CS-Cart (он тоже использует Smarty). В плане ступенчато загружались 17 CSS файлов, и 15 Javascript, что безусловно же, никуда не годится. Из них приблизительно половина доводилась на сам движок CS-Cart, а вторая — на установленные аддоны. Необходимо было решение, которое бы дозволило объединить CSS / Javascript и сделать это с минимальными изменениями подлинных файлов плана. Аддоны сами подгружают свои CSS и Javascript. Не хотелось лезть в логику самих аддонов, следственно Bender разрешает делать очередь из CSS / Javascript, по той же схеме, что и WordPress.

Bender не претендует на уникальность и широкие вероятности (как скажем, assetic). Тут иная задача: минимальность (совместно с упаковщиками это каждого 3 файла), и простота подключения к присутствующему плану.

Как это применять?

В качестве примера возьмём кусок кода, тот, что подключает CSS и Javascript, по четыре штуки в ряд две штуки всякого:

<html lang="en">
    <head>
        <link href="assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
        <link href="assets/css/bootstrap-theme.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="assets/js/jquery-1.10.2.js"></script>
        <script type="text/javascript" src="assets/js/bootstrap.js"></script>
    </head>
    <body>
        ...
    </body>
</html>

Сейчас добавим Bender:

<html lang="en">
    <head>
        <?php
        require_once "Bender/Bender.class.php";
        $bender = new Bender();
        // Ставим в очередь наши файлы CSS и JS
        $bender->enqueue("assets/css/bootstrap.css");
        $bender->enqueue("assets/css/bootstrap-theme.css");
        $bender->enqueue("assets/js/jquery-1.10.2.js");
        $bender->enqueue("assets/js/bootstrap.js");
        // В качестве альтернативы, вы можете добавить все файлы в виде массива: $bender->enqueue(array("assets/css/bootstrap.css", "assets/css/bootstrap-theme.css", ...));
        // Вставляем ссылку на скомбинированный / упакованный CSS <link rel="stylesheet" href="..." /> в секцию <head>
        echo $bender->output("cache/stylesheet.css");
        ?>
    </head>
    <body>
        ...
        <?php
        // вставляем ссыку на скомбинированный / упакованный JS <script src="..."> перед </body> (для распараллеливания загрузки)
        echo $bender->output("cache/javascript.js");
        ?>
    </body>
</html>

Итогом работы Bender будет дальнейший код:

<html lang="en">
    <head>
        <link href="assets/css/stylesheet.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        ...
        <script type="text/javascript" src="assets/js/javascript.js"></script>
    </body>
</html>

Если результирующие файлы теснее были сделаны, то они не перезаписываются. Это поведение дозволено изменить через качество ttl (см.ниже).

CSS / JS файлы на выходе мимими минимизируются. По умолчанию, для Javascript применяется Dean Edwards’ JavaScriptPacker, для CSS — Joe Scylla’ CssMin. Они дают крайне недурной итог, но в перспективе дозволено будет подключить и другие минимизаторы. Также, дозволено отключить минимизацию вовсе — итогом будут скомбинированные, но не сжатые файлы.

Smarty

Bender включает плагин для Smarty. Для этого легко необходимо разместить function.bender.php в директорию плагинов Smarty, не позабыв заинклюдить сам класс Bender где-нибудь в скриптах инициализации плана. Применение Bender в образце Smarty:

<html lang="en">
    <head>
        {bender src="assets/css/bootstrap.css"}
        {bender src="assets/css/bootstrap-theme.css"}
        {bender src="assets/js/jquery-1.10.2.js"}
        {bender src="assets/js/bootstrap.js"}
        {bender output="cache/stylesheet.css"}
    </head>
    <body>
        ...
        {bender output="cache/javascript.js"}
    </body>
</html>

 

Свойства

У Bender пока что минимум свойств. Вот они:

$bender->cssmin: может принимать значения "cssmin" для применения минимизатора CssMin, всякое другое значение отключит минимизацию CSS.
$bender->jsmin: "packer" для применения JavaScriptPacker, "jshrink" для JShrink, либо всякое другое значение отключит минимизацию JS.
$bender->ttl: время жизни скомбинированных файлов. По умолчанию это 3600 секунд, по истечении которых, результирующие файлы будут перезаписаны. 0 - неизменно перезаписывать, -1 - никогда не перезаписывать.

 

В планах

 

  • Плагины для Twig и WordPress
  • Добавить параметры для enqueue и output
  • Качество $dev — будет отдавать файлы «as is», без комбинирования — для режима отладки

Скачать Bender с GitHub | Инструкции по применению на английском

Буду рад предложениям по совершенствованию, отзывам и даже критике в комментариях. Я думаю вы додумались, что наименование Bender не имеет ничего всеобщего с Футурамой — оно происходит от слова «комбинатор».

Источник: programmingmaster.ru

Оставить комментарий
Форум phpBB, русская поддержка форума phpBB
Рейтинг@Mail.ru 2008 - 2017 © BB3x.ru - русская поддержка форума phpBB