使用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 文件中的属性可以根据请求进行更改，因此我认为您误用了 assetic（甚至可能更少）。听起来您正在尝试使用 assetic 作为较少的预处理器，但事实并非如此+没有理由缓存结果（这取决于它们实际上每个请求不同的频率）。

您没有详细了解您想要实现的目标，但我认为它类似于主题引擎，用户可以在其中更改其配色方案（和其他外观变量）。如果是这种情况，我认为您应该将大部分 CSS/less 文件放在一个模板中，对于所有请求都是通用的，然后在您的 silex 应用程序中设置一条路由，以使用数据库中的变量传递特定于主题的 css。

由于每个请求它们可能不同，我认为没有理由为每个请求在服务器上添加更少的预处理开销，因此您应该直接输出 CSS。如果您对此感到满意，最多可以让客户端处理 .less 文件。