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

Не так давно на Хабре уже была статья про комбинатор 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 не имеет ничего общего с Футурамой — оно происходит от слова «комбинатор».