Das AsseticBundle ist ein Wrapper um Assetic, ein geniales Tool, um statische Assets für Webprojekte zu verwalten. AsseticBundle ist extrem einfach zu verwenden, einfach die entsprechende Filter-Chain via yaml konfigurieren, um mehr muss man sich nicht kümmern. Natürlich allerdings müssen die zugrundeliegenden Abhängigkeiten im Vorfeld installiert sein. In unserem Falle benötigen wir den Yui-Compressor als jar-File und Less CSS. Less ist ein node.js Modul, was bedingt, dass wir zuvor node.js installieren müssen.
Also node.js via macports holen:
$ sudo port install nodejs
Und den node.js-eigenen Package-Manager:
$ sudo port install npm
Mit diesem installieren wir als nächsts less, und zwar “global” (via -g)-Flag (“global” bedeutet, dass das Modul unter $nodejs_lib_path/../node_modules abgelegt wird, ansonsten wird es im aktuellen Arbeitsverzeichnis unter ./node_modules installiert):
$ sudo npm install -g less
Damit haben wir alles, um unsere less CSS Stylesheets kompilieren zu können.
Als nächstes holen wir uns den Yui-Kompressor, diesen habe ich mir einfach aus dem Netz gezogen und unter app/java/yuicompressor-2.4.6.jar abgelegt (Die Binary findet ihr unter http://developer.yahoo.com/yui/compressor/).
Nun die Konfiguration:
app/config.yml:
# Assetic Configuration
assetic:
debug: %kernel.debug%
use_controller: false
filters:
cssrewrite: ~
less:
node: /opt/local/bin/node
node_paths: [/opt/local/lib/node, /opt/local/lib/node_modules]
yui_css:
jar: %kernel.root_dir%/java/yuicompressor-2.4.6.jar
Zu beachten sind die “node_paths”. Der node.js-Modulpfad muss explizit angegeben werden, sonst kann node.js die require()-Statements nicht auflösen (das sind sozusagen die node.js-“Classpaths”). /opt/local/lib/node zeigt auf Core-Module, in /opt/local/lib/node_modules liegt unser less.
Um den Yui-Kompressor zu aktivieren, reicht der simple Pfad zur .jar-Datei.
Nun müssen wir nur noch unser Twig-Layout anpassen:
src/Nerdpress/DemoBundle/Resources/views/layout.html.twig:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
{% stylesheets
'@NerdpressDemoBundle/Resources/public/css/main.css'
'@NerdpressDemoBundle/Resources/public/css/layout.css'
filter='less,?yui_css'
combine=true
%}
<link rel="stylesheet" href="{{ asset_url }}" type="text/css" media="all" />
{% endstylesheets %}
Das “?” vor dem Filter “yui_css” bedingt, dass die CSS-Compression nur angeschaltet wird, wenn der Debug-Parameter auf false steht. “Combine” bedeutet, dass alle CSS-Dateien in einer einzigen, großen Datei zusammengefügt werden, und “less” bedeutet letztlich, dass alle CSS-Dateien mittels less CSS precompiled werden.
That´s it. Die Seite im Browser öffnen und das Ergebnis bewundern. Viel Spaß! Symfony ist schon was feines…