使用Silex / SilexExtensions和Assetic在Twig中動態CSS / Javascript

Question

我想做什么：從數據庫中獲取CSS屬性並將其轉儲到較少的文件中。 然后在其上應用less / yui compress-filter並將輸出轉儲到我的twig模板中。

---

讓我馬上談談：

我有一個使用Silex和Twig作為模板引擎的PHP Web應用程序。 為了處理和縮小css / js文件，我正在嘗試使用Assetic和Silex-Twig / Assetic-Extensions。

我已經注冊了silex擴展並設置了我想要使用的過濾器。 現在我對如何將文件轉儲到我的樹枝模板中沒有任何線索。 谷歌搜索讓我陷入困境。 由於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 %}

我很感謝每一篇關於我關注的帖子。

Answer 1

由於（你提到）less文件中的屬性可以根據請求進行更改，我認為你錯過了資產（甚至可能更少）。 聽起來你正在嘗試使用資產作為一個較少的預處理器，它不是+沒有理由緩存結果（這取決於它們實際上每個請求的差異頻率）。

你沒有詳細了解你想要實現的目標，但我認為它類似於主題引擎，用戶可以在其中更改顏色方案（以及其他外觀變量）。 如果是這種情況，我認為您應該將大部分CSS / less文件放在一個模板中，這對所有請求都是通用的，然后在您的silex應用程序中有一條路由，以便使用DB中的變量提供特定於主題的css。

由於每個請求它們可以不同，我認為沒有理由為每個請求在服務器上添加較少的預處理開銷，因此您應該輸出直接的CSS。 如果您對此感到滿意，最多可以讓客戶端處理.less文件。