M’étant moi même battu pour installer proprement ce systeme, je tiens a partager avec vous ma démarche a suivre pour installer et intégrer Less à vos projets Symfony2 avec YUI compressor.
Je ne vais pas m’attarder sur l’explication du fonctionnement d’Assetic, ceci est déjà très bien fait sur la page officielle, je vous conseille fortement d’aller y faire un tour ! 😉
Installation de less sur Ubuntu
Pour utiliser Less sur Symfony2, nous allons procéder a une installation de type server-side.
Pour le faire, nous avons tout d’abord besoin de nodejs et npm :
apt-get install nodejs apt-get install npm
Pour les autres distributions Linux ne possèdant pas le paquet nodejs et npm, je vous invite à suivre les instructions sur les sites de nodejs et npm.
Ensuite il ne reste plus qu’à installer less avec cette simple commande :
cd /usr/local/lib sudo npm install -g less
Configuration de Symfony
Avant de configurer votre projet pour less, nous devons savoir où est le binaire node :
which node # Vous affichera par exemple : /usr/bin/node
Le dossier node_modules devrait se trouver où nous l’avons installé, c’est à dire dans /usr/local/lib, si vous souhaitez chercher après :
locate -b "\node_modules" # Repérez celui contenant le dossier less
Nous allons maintenant déclarer deux variables dans notre parameters.yml ( ou .ini par default pour Symfony2.0) :
parameters:
node_bin: /usr/bin/node # Le chemin du binaire node
node_modules: /usr/local/lib/node_modules # le path ou se trouve le dossier less
Et ensuite, importer les variables dans le fichier config.yml :
imports:
- { resource: parameters.yml }
# Assetic Configuration
assetic:
debug: %kernel.debug%
use_controller: false
bundles: [VotreBundle]
filters:
less: # Nous importons ici nos variables
node: %node_bin%
node_paths: [%node_modules%]
yui_css:
jar: %kernel.root_dir%/Resources/java/yuicompressor.jar
yui_js:
jar: %kernel.root_dir%/Resources/java/yuicompressor.jar
Je ne m’attarde pas sur la configuration de yui_css, ceci est déjà expliqué par ici.
Mais pourquoi diable créer des variables dans parameters.yml ? On peut très bien les mettres directement dans le fichier de config !
En effet ! 😀 Mais imaginez une seconde que vous travaillez en projet avec un ami qui travail par exemple sur un mac ? Il n’aura pas forcement le même chemin d’accès pour node et node_modules ! Avec cette méthode, chacun pourra configurer less comme il faut ! 😉
D’ailleurs en passant, pour nos amis travaillant sur mac, je vous conseille de lire un très bon article similaire au mien mais plus spécialisé dans le domaine de la pomme sur funstaff.ch.
Importation avec twig
Et c’est parti pour la déco ! \o/
Je vous laisse créer le fichier less de votre choix, dans cet article nous l’appellerons main.less
Pour importer votre code less afin qu’il soit automatiquement compilé en css, il suffit d’ajouter ce bout de code dans votre fichier twig :
{# app/Resources/base.html.twig #}
{% stylesheets
filter='less,?yui_css'
output='css/compiled/main.css'
'@VotreBundle/Resources/less/main.less'
%}
<link rel="stylesheet" type="text/css" media="screen" href="{{ asset_url }}" />
{% endstylesheets %}
Si vous navigez en environement de dev, Assetic vérifiera les modifications et recompilera le css automatiquement dès que nécessaire.
En mode production, il vous faudra utiliser la commande suivante pour compiler votre fichier css :
php app/console assetic:dump --env=prod
Sachez qu’il existe tout de même un petit bug, si vous modifiez des fichiers less importés à partir d’un autre fichier (@import), les changements ne seront pas détectés au chargement de la page de dev. Vous serez donc contraint de vider le cache et de forcer la compilation, si ce bug est résolu dans les prochaines versions, faites moi signe ! 😉
A vos pinceaux !
Voila, vous avez toutes les clés en mains pour profiter de la puissance de less sur Symfony2, il ne manque plus que l’esprit créatif de vos petites têtes blondes ! 😛
Une question ? Une coquille dans l’article ? N’hesitez-pas à m’en faire part ! 😉
0
0
0