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