Twig中使用Silex/SilexExtensions和Assetic的动态CSS/Javascript


Dynamic CSS/Javascript in Twig using Silex/SilexExtensions and Assetic

我想做的是:从数据库中获取CSS属性,并将其转储到less文件中。然后在它上面应用一个less/yui压缩过滤器,并将输出转储到我的trick模板中


让我马上开门见山:

我有一个使用Silex和Twig作为模板引擎的PHP web应用程序。为了处理和缩小css/js文件,我尝试使用Assetic和Silex Twig/Assetic扩展。

我已经注册了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写入缓存目录?但我真的很难从我的小树枝模板中获得正确的include语法。以下实现似乎不起作用:

{% 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 %}

我感谢每一个关于我关心的帖子。

由于(您提到)less文件中的属性可以根据请求进行更改,我认为您使用了assetic(甚至更少)。听起来你正试图使用assetic作为一个较少的预处理器,但事实并非如此+几乎没有理由缓存结果(这取决于每个请求实际不同的频率)。

你没有太多关于你想要实现什么的细节,但我认为它有点像主题引擎,用户可以在其中更改他们的配色方案(和其他外观变量)。如果是这样的话,我认为你应该把你的大部分CSS/less文件放在一个模板中,对所有请求都是通用的,然后在你的silex应用程序中有一个路由,用DB中的变量传递主题特定的CSS。

由于每个请求的预处理开销可能不同,所以我认为没有理由为每个请求在服务器上增加更少的预处理费用,所以应该直接输出CSS。如果您对此感到满意的话,最多可以让客户端处理较少的文件。