Minifier ses fichiers a plusieurs intérêts :

• Réduire le poids des fichiers et donc leur temps de chargement
• Obfusquer le code source pour le rendre moins lisible par des tiers

Dans ce tutoriel, je vais vous apprendre comment minifier vos fichiers Javascript et CSS grâce à YUI Compressor.

Pour commencer, il vous faut télécharger YUI Compressor. Rendez-vous sur cette page et téléchargez la dernière version. Dézippez l'archive sur votre bureau par exemple. Vous avez maintenant un dossier yuicompressor-X.X.X. Ce dossier contient un repertoire nommé build lui même contenant un fichier yuicompressor-X.X.X. Ce fichier est un fichier JAR, une archive Java. Copiez ce fichier à l'endroit où sont vos fichiers à minifier ou ailleurs, c'est comme vous voulez.

Pour utiliser ce programme, vous aurez donc besoin que la JVM soit installée sur votre ordinateur. Pour le vérifier et la télécharger si vous ne l'avez pas, c'est ici.

A présent, ouvrez votre console/terminal et déplacez vous dans le répertoire où vous avez copié le fichier JAR. Pour ne pas vous compliquer la vie, je vous conseille de renommer le fichier JAR de yuicompressor-X.X.X.jar en yuicompressor.jar.

Que le fichier ait pour extension .js ou .css, le code à taper est le même. Si vous tapez ce code ci ou myfile.js est le fichier javascript à minifier.

java -jar yuicompressor.jar myfile.js

Le programme, après avoir passer quelques secondes à travailler va vous afficher votre fichier minifié dans la console. Ce n'est pas forcément très pratique. Pour que la sortie se fasse dans un fichier, tapez le code suivant où myfile-min.js est le fichier minifié.

java -jar yuicompressor.jar myfile.js -o myfile-min.js

Et voilà, ce n'est pas plus compliqué que ça. Pour un fichier CSS, c'est exactement la même chose, vous n'avez qu'à changer l'extension.

java -jar yuicompressor.jar myfile.css -o myfile-min.css

Vous pouvez néanmoins spécifier quelques options supplémentaire :

• -v (verbose) : le compresseur affichera des informations ou des erreurs pendant la compression
• -type js|css : spécifie le type de fichier à compresser si le fichier n'a pas d'extension
• --nomunge : le compresseur ne fait que minifier le fichier, il ne l'obfusque pas

C'est tout ce qu'il y a à savoir pour minifier vos fichiers Javascript et CSS. Le fait de minifier les fichiers qui doivent être téléchargés par le navigateur à chaque chargement de page permet d'économiser beaucoup de temps de chargement et tout spécialement si vous faites appel à de nombreux fichiers sur vos pages web.

Abonnez vous au flux RSS des tutoriels pour rester informé.
Sinon, n'hésitez pas à laisser un commentaire ou à partage ce tutoriel sur les réseaux sociaux, ça me fait toujours plaisir et m'encourage à continuer mon oeuvre pour un monde meilleur.

Ajouter un commentaire