Изначально задача состояла в оптимизации загрузки CSS / Javascript одного проекта, основанного на CS-Cart (он тоже использует Smarty). В проекте последовательно загружались 17 CSS файлов, и 15 Javascript, что конечно же, никуда не годится. Из них примерно половина приходилась на сам движок CS-Cart, а вторая — на установленные аддоны. Нужно было решение, которое бы позволило объединить CSS / Javascript и сделать это с минимальными изменениями оригинальных файлов проекта. Аддоны сами подгружают свои CSS и Javascript. Не хотелось лезть в логику самих аддонов, поэтому Bender позволяет делать очередь из CSS / Javascript, по той же схеме, что и WordPress.
Как это использовать?
В качестве примера возьмём кусок кода, который подключает 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 не имеет ничего общего с Футурамой — оно происходит от слова «комбинатор».
ссылка на оригинал статьи http://habrahabr.ru/post/199512/
Добавить комментарий