CakePHP – Combinator helper
Aujourd’hui je vous propose un helper CakePHP que je viens de terminer : Combinator (je trouve que ça sonne bien).
A quoi ça sert ?
Ce helper vous permet de combiner vos fichiers javascripts et/ou css en un seul fichier, afin de réduire les requêtes HTTP de votre site. Il pourra de plus compresser le tout afin de réduire au maximum le poids de ces derniers.
Pourquoi ne pas utiliser le plugin Asset ?
Effectivement il existe un plugin similaire développé par Matt Curry : Asset
Pour être honnête j’ai régulièrement eut des problèmes avec ce dernier, probablement car j’utilise un autre plugin (que je vous partagerai un jour) qui charge automatiquement les javascripts / css dont j’ai besoin à la volée.
J’ai donc développé mon propre helper pour ce travail, dont le fonctionnement est plus « libre » pour l’utilisateur (à mon sens)
Installation
1. Copier le helper dans /app/views/helpers
2. Copier jsmin (1.1.0 ou plus) et csstidy (1.3 ou plus), fournis dans l’archive, dans respectivement /app/vendors/jsmin et /app/vendors/csstidy
3. Inclure le helper dans votre application, généralement dans AppController afin qu’il soit disponible sur toute votre application :
var $helpers = array(‘Combinator’);
4. Dans le layout ou la vue ajoutez les javascripts et/ou css comme ceci :
<?php $combinator->add_libs(‘js’, array(‘jquery’, ‘jquery.easyShare’));?>
<?php $combinator->add_libs(‘css’, array(‘styles’));?>
Ou si vous souhaitez ajouter du css/js inline :
<?php $combinator->add_inline_code(‘css’, ‘#header {border:2px solid red}’);?>
Notez que le deuxième paramètre peut être un tableau ou une simple chaine. Les extensions .js et .css sont optionnelles et seront ajoutées automatiquement si absentes.
5. Créez les liens dans le layout ou la vue :
<?php echo $combinator->scripts(‘js’);?>
<?php echo $combinator->scripts(‘css’);?>
Ou
<?php echo $combinator->scripts();?>
pour tout inclure au même endroit.
Comment ça marche ?
Le helper va récupérer le contenu de tous les fichiers (par type), les combiner, les compresser puis insérer le tout dans un seul fichier de cache (toujours par type)
Tips & Tricks
- Par défaut les fichiers sont compressés, vous pouvez changer cela via les options du helpers
- Par défaut les fichiers générés sont stockés dans /app/webroot/js et /app/webroot/css. Vous pouvez changer cela via les options du helpers
- Si vous rencontrez une erreur javascript après la compression c’est en général du au manque d’un « ; » quelque part.
- L’ordre d’appel est important, si script1 est appelé avant script2 dans une vue, et l’inverse dans une autre, deux fichiers de cache seront générés.
- Le helper a été testé avec CakePHP 1.2.x et CakePHP 1.3.x
Warning
CssTidy semble poser problème avec le css3 (problème rencontré avec la propriété background gradient)
Convaincu ? Téléchargement !
L’archive est téléchargeable ici
Pour changer, tous les commentaires ou suggestions sont les bienvenus.
