Après un petit moment de silence, voici une petite publication concernant l’installation de LESS pour pouvoir l’utiliser avec Symfony2 et Assetic. Pour cela, nous allons utiliser MacPorts. Vous devez posséder les droits administrateur pour le faire.
L’utilisation de LESS demande une installation de Node.js ainsi que Node Package Manager.
sudo port install nodejs sudo port install npm
Nous allons contrôler que nos 2 éléments ci-dessous soient bien installés.
$ node --version v0.4.11 $ npm --version 1.0.26
Avec les deux commandes ci-dessous, vous avez maintenant la base. Il nous reste à installer LESS:
sudo npm install -g less
Vous avez la possibilité de voir les packages installés avec la commande suivante:
npm list -g
Il nous reste à installer YUI-Compressor. Vous pouvez télécharger la dernière version chez yahoo. Copier le fichier « yuicompressor-2.4.6.jar » du dossier build dans le dossier app/Resources/java.
Passons maintenant à la configuration d’assetic. Nous allons ajouter quelques lignes dans le fichier se trouvant dans app/config/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%/Resources/java/yuicompressor-2.4.6.jar
yui_js:
jar: %kernel.root_dir%/Resources/java/yuicompressor-2.4.6.jar
Il nous reste à ajouter quelques lignes dans notre layout de base dans la partie head:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
{% stylesheets
'@FunstaffCoreBundle/Resources/assets/less/foo.less'
filter='less,?yui_css'
output='css/foot.css'
%}
<link href="{{ asset_url }}" rel="stylesheet" media="screen" />
{% endstylesheets %}
...
</head>
<body>
...
</body>
</html>
Vous nouvelle configuration est prête à être utilisé.
Encore une dernière chose, si vous voulez générer votre css pour votre site en production, il suffit d’exécuter cette commande:
./app/console assetic:dump --no-debug
Voici les sources qui m’ont aidé à écrire cet article:
- LESS CSS Assetic Configuration in a Symfony2 Project
- How to Minify JavaScripts and Stylesheets with YUI Compressor
J’ai créé un article similaire pour Ubuntu ici, je t’ai recommandé dessus pour les développeurs mac, ton article est super ! 🙂
Petite question rien à voir, quel plugin wordpress utilises-tu pour SyntaxHighlighter ? Tu n’as pas des soucis de tags html qui disparaissent quand tu switch entre la vue visuel et html sur ton éditeur ?
Bon dev ! 😉
Ping : Symfony2 et Assetic, comment intégrer less et yui compressor sur Ubuntu linux | DevYourDreamDevYourDream
SVP g besoin de la config avec windows :(( surtt la config du assetic plzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz partie less:
08
node: /opt/local/bin/node
09
node_paths: [/opt/local/lib/node, /opt/local/lib/node_modules]
Il y a également Less App qui compile à la volée vos fichier .less modifiés:
http://incident57.com/less/
Sachant que pour ceux qui l’ont installé avec homebrew, pour la configuration de less dans le fichier config, c’est plutôt comme ça: less: node: /usr/local/bin/node node_paths: [/usr/local/bin/node, /Users/%__user__%/node_modules] Good job !