Minifier,compacter des fichiers css, js

Par Laurent | 01.04.11 11:46 | 0 commentaire(s) | programmation

Voici une technique fort pratique permettant de minifier des fichiers d'extension css ou js(javascript) grâce à un outil YUI Compressor.
Le but est ainsi donc de réduire la taille de fichiers css,jss en gagnant ainsi en place et en requêtes faites par le serveur.


Pour celà voici la méthode :
1) téléchargez le yuicompressor (actuellement c'est la version yuicompressor-2.4.2)


2)dézippez le fichier téléchargé.
créez par exemple un répertoire appelé tests sur votre disque dur c:/ puis collez le répertoire yuicompressor-2.4.2

3)c'est là qu'on créé 2 fichiers dans le répertoire c:/tests/ (avec notepad par exemple) qu'on appellera ex.css et new.css le fichier ex.css contiendra le contenu du fichier à compacter et new.css sera vide (avant de recevoir le résultat du compactage).
Pour les fichiers javascripts(js) on créé (ex.js avec un contenu et new.js sera vide)

4) c'est presque fini, il ne reste plus qu'a vérifier qu'on a bien java installé sur son ordinateur car c'est java qui va permettre le compactage en interprétant le code yuicompressor écrit en java...
Voici la page pour télécharger Java

5) voilà donc il ne reste plus qu'à lancer le compactage des données css ou javascripts par le biais d'une commande.
pour celà (sous Windows)

5.1)menu démarrer / exécuter / je tape cmd puis entrée.
J'arrive sur c:\users\unevaleur\ (le chemin dépend de sa config)

5.2) je souhaite me placer dans le répertoire de travail donc je fais cd.. puis entrée.Je re-fais cd.. puis entrée, pour revenir à la racine du disque c:\

je fais cd tests pour me placer dans le répertoire de travail : c:\tests>

5.3) voilà la ligne de commande pour compacter un fichier css :
javaw -jar yuicompressor-2.4.2/build/yuicompressor-2.4.2.jar --type css -o new.css ex.css

logiquement si tout se passe correctement dans new.css vous devriez voir le fichier ex.css compacté.

5.4) voilà la ligne de commande pour compacter un fichier javascript :
javaw -jar yuicompressor-2.4.2/build/yuicompressor-2.4.2.jar --type js --charset utf-8 -o new.js ex.js



vous trouverez le résultat du compactage dans le fichier new.css ou new.js suivant le type de fichier que vous compacterez

Info : vous pouvez modifier des paramètres lors de la génération du fichier juste en ajoutant des options dans la ligne de commande :
plus d'infos yui compressor

-sur une plateforme telle que linux il suffit de modifier javaw par java (ligne de commande) pour lancer la génération du fichier.

Conseil : gardez toujours le fichier(css ou js) non compacté en sauvegarde avant de le compacter, pour pouvoir le modifier facilement si besoin est...