Статьи

Assetic: управление файлами JavaScript и CSS

Assetic — это PHP-библиотека для управления размещением ваших ресурсов: JavaScript, CSS и других ресурсов, которые будут запрашиваться браузером. Библиотека была создана Крисом Уоллсмитом из OpenSky , интернет-магазина, в котором работают или работают многие активные участники сообщества PHP (см. Джонатан Вейдж / Doctrine 1 и Bulat Shakirzyanov / Imagine.)

Как активы развернуты

Как наиболее простой вариант, файлы ресурсов можно просто переместить в общую папку в корне документа, чтобы они были доступны напрямую через HTTP-запрос. Использование тегов <script> и <link> свяжет ваши веб-страницы с этими файлами.

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

  • браузер должен запрашивать много разных файлов , добавляя накладные расходы на каждый из них.
  • Браузер должен получать ненужный трафик , понимая пробелы, вкладки и другие символы форматирования кода, которые ему не нужны .

Что вы можете сделать с Assetic?

Вы можете создать один файл для всех ресурсов одного типа (JavaScript, CSS) и вывести результат. Браузер должен будет запросить только один большой файл, который будет легко кэшироваться. В этом сценарии вы перемещаете сложность тегов <script> в код PHP, который вам может быть более знаком; И как вы увидите, действительно просто объединить все файлы в дереве каталогов.

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

Промежуточный шаг также позволяет выполнять компиляцию из языка более высокого уровня в JavaScript и CSS. SASS и CoffeeScript — языки, которые по умолчанию включены в Rails 3.x — являются примерами абстракции над. Если вы хотите разрабатывать на этих языках, Assetic гарантирует, что каждый файл скомпилирован в то, что может прочитать браузер.

Обратите внимание, что компиляция SASS и CoffeeScript соответственно зависит от наличия двоичных файлов sass и coffeeузлом ). Многие другие фильтры предполагают наличие JAR-файлов и других внешних библиотек, путь которых вы можете указать и которые могут быть вызваны пользователем, который работает, будь то веб-сервер или процесс развертывания. Политика Assetic заключается в предоставлении единого PHP Api для этих внешних библиотек, не перекомпилируя колесо.

Пример

Я создал три небольших файла JavaScript, каждый из которых содержит одну строку. Вот как я заставил Assetic объединить их:

<?php
use Assetic\Asset\AssetCollection;
use Assetic\Asset\FileAsset;
use Assetic\Asset\GlobAsset;

/**
 * I have included the tests bootstrap for simplicity, but if you have a PSR-0
 * autoloaders (standard for Zend Framework or Symfony) you can use that.
 */
require_once __DIR__ . '/tests/bootstrap.php';

/**
 * I take the example of the documentation and add real files.
 */
$javascriptCode = new AssetCollection(array(
    new GlobAsset('js-always-to-be-included/*'),
    new FileAsset('additional.js')
));

echo $javascriptCode->dump();

В результате получается одна строка:

[10:46:01][giorgio@Desmond:~/code/assetic]$ php test.php
myjs = {};

myjs.method = function() {};

myjs.otherMethod = function() {};

Я также попытался минимизировать его с помощью общедоступного Google Api, чтобы этот процесс работал «из коробки»:

use Assetic\Filter\GoogleClosure\CompilerApiFilter;

$javascriptCode = new AssetCollection(array(
    new GlobAsset('js-always-to-be-included/*'),
    new FileAsset('additional.js')
), array(
    new CompilerApiFilter()
));

echo $javascriptCode->dump();

Даже последний символ \ n не остается после сжатия.

[10:47:05][giorgio@Desmond:~/code/assetic]$ php test_filter.php
myjs={};
myjs.method=function(){};
myjs.otherMethod=function(){};[10:47:43][giorgio@Desmond:~/code/assetic]$

Как вы можете видеть, скрипт, использующий объекты Assetic, может просто выводить результат, который ваш HTTP-сервер может кэшировать (если вы поместите скрипт в публичный каталог). Альтернативой является запись результата в файлы, которые будут помещены в этот каталог: Assetic / AssetWriter — правильный инструмент для этой работы. В последнем случае у вас также есть больший контроль над недействительностью развернутого кода, так как простая замена файла в процессе развертывания обновит копию, обслуживаемую веб-сервером.