Динамический CSS / Javascript в Twig с использованием Silex / SilexExtensions и Assetic - PullRequest
Новая
       12

Динамический CSS / Javascript в Twig с использованием Silex / SilexExtensions и Assetic

12 голосов
/ 19 января 2012

Что я хочу сделать: Получить свойства CSS из базы данных и выгрузить их в меньший файл.Затем примените к нему фильтр сжатия less / yui и выведите результат в мой шаблон веточки.

Позвольте мне сразу же перейти к точке:

У меня есть PHP-сетьприложение, использующее Silex и Twig в качестве шаблонного движка.Для обработки и минимизации файлов css / js я пытаюсь использовать Assetic и Silex-Twig / Assetic-Extensions.

Я зарегистрировал расширения Silex и установил фильтры, которые хочу использовать.Теперь я не имею ни малейшего понятия о том, как записать файлы в шаблон веточки.Поиск Google держит меня в неведении.Поскольку свойства в файле lessfile могут меняться при каждом запросе, я думаю, что нет статической доставки файлов.

Это моя реализация расширений Silex: 

$oApp = new Silex\Application();

//$oApp['autoloader']->registerNamespace('Assetic', DIR_VENDOR.'/assetic/src');
//$oApp['autoloader']->registerNamespace('SilexExtension', DIR_VENDOR.'/silex-extension/src');
//$oApp['autoloader']->registerNamespace('Twig', DIR_VENDOR.'/twig/lib');

$oApp->register(
    new Silex\Provider\TwigServiceProvider(), array(
        'twig.path' => DIR_ROOT.'/src/templates',
        'twig.class_path' => DIR_VENDOR.'/twig/lib',
    ),
    new SilexExtension\AsseticExtension(), array(
        'assetic.class_path' => DIR_VENDOR.'/assetic/src',
        'assetic.path_to_web' => DIR_ASSETS,
        'assetic.options' => array(
            'debug' => false,
            'formulae_cache_dir' => DIR_TMP.'/Assetic/cache',
            'twig_support' => true
        ),
        'assetic.filters' => $oApp->protect(function($fm) {
            $fm->set('yui_css', new Assetic\Filter\Yui\CssCompressorFilter(
                DIR_YUI.'/yuicompressor-2.4.7.jar'
            ));
            $fm->set('yui_js', new Assetic\Filter\Yui\JsCompressorFilter(
                DIR_YUI.'/yuicompressor-2.4.7.jar'
            ));
            $fm->set('googlecc_js', new Assetic\Filter\GoogleClosure\CompilerJarFilter(
                DIR_GOOGLE_CC.'/compiler.jar'
            ));
        }),
        'assetic.assets' => $oApp->protect(function($am, $fm) {
            $am>-set('styles', new Assetic\Asset\AssetCache(
                new Assetic\Asset\GlobAsset(
                    __DIR__ . '/resources/css/*.css',
                    array($fm->get('yui_css'))
                ),
                new Assetic\Cache\FilesystemCache(DIR_TMP.'/Assetic/cache')
            ));
            $am->get('styles')->setTargetPath(DIR_ASSETS.'/css/styles.css');
        })
    )
);

ПосколькуCSS-файлы обрабатываются с помощью меньшего фильтра (значения переменных должны поступать из базы данных). Мне нужно сохранить / кэшировать выходной файл.Я думаю, что мне нужен LazyAssetManager в сочетании с AssetWriter, который записывает output.css в каталог кэша?Но я действительно изо всех сил пытаюсь получить правильный синтаксис включения из моих шаблонов веток.Следующая реализация, похоже, не работает: 

{% stylesheets 'path/to/my/css' 'another/path/to/my/css' filter='yui_css' output='path/to/output/directory/styles.css' %}
<link href="{{ asset_url }}" rel="stylesheet" media="screen" />
{% endstylesheets %}

Я благодарен за каждую публикацию, касающуюся моей озабоченности.

1 Ответ

2 голосов
/ 05 августа 2012

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

Вы не вдаваетесь в подробности о том, чего хотите достичь, но я думаю, что это что-то вроде механизма тематики, где пользователи могут изменять свою цветовую схему (и другие переменные внешнего вида). Если это так, я думаю, что вы должны поместить большую часть ваших файлов CSS / less в один шаблон, общий для всех запросов, а затем иметь маршрут в вашем приложении Silex для доставки css для конкретной темы с переменными из БД.

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

...