johanBleuzen

La ligne de commande c'est l'outil de l'informaticien geek qui n'est pas toujours apprécié à sa juste valeur par les non initiés. Mais la ligne de commande peut s'avérer être un précieux allié dans votre quotidien de développeur web performant. Voici donc une présentation de quelques outils en ligne de commande qui permettent d'optimiser vos fichiers simplement et rapidement...

C'est le dernier article de Stoyan Stefanov qui m'a donné l'idée d'écrire ce post. Dans son article Command-line CSS spriting Stoyan explique comment utiliser la ligne de commande pour créer des sprites en concaténant toutes les images d'un répertoire. Mais on peut faire pas mal d'autres choses en lignes de commandes...

La grande majorité des outils présentés dans cet article existent en version online et c'est généralement cette version qu'on utilise pour traiter quelques fichiers. Mais que faire lorsque l'on a beaucoup de fichiers? On utilise la puissance de la ligne de commande avec les librairies suivantes...

YUICompressor

Un des outils de minification le plus connu est probablement YUICompressor, il permet de minifier vos fichiers CSS et JS en saisissant une ligne de commande. La puissance de l'outil n'est plus à démontrer et il est vraiment très simple à utiliser. Pour fonctionner il est nécessaire d'avoir Java installé sur sa machine, mais il n'y a besoin d'aucune connaissance du language Java. La commande à saisir, très basique, est la suivante :

java -jar yuicompressor.jar [OPTIONS] fichier_input -o fichier_output

Les options sont nombreuses et permettent de gérer les encodages des fichiers, d'activer ou non les micro-optimisations, faciliter le debug avec le mode verbose. Bref, YUICompressor est un must des outils en ligne de commande.

ImageMagick

La manipulation et le traitement d'image est quelque chose de très simple avec ImageMagick qui est une suite d'utilitaires utilisable en ligne de commande et disponible dans dans de très nombreux langagues de programmation. Je ne vais pas rentrer dans les détails car cette librairie est très puissante et dispose de très nombreux outils. Par exemple, il est possible dans son terminal de changer le format d'une image, la redimensionner ou encore ajouter un filtre.

Bien qu'ImageMagick soit un utilitaire très puissant, il y a un endroit ou il pêche, c'est dans l'optimisation des images pour le web.

Smushit

Heureusement il existe une petite librairie Java qui permet de traiter ces images avec Smushit via la ligne de commande à condition d'avoir un accès à internet puisque la librairie s'appuie sur le service en ligne de Yahoo. Le fonctionnement est très simple et il n'est pas nécessaire de connaitre le language Java puisque l'utilitaire scanne un répertoire et envoie l'image à Smushit

java -jar smushit.jar imageDir=. verbose=true

Le fait de devoir avoir une connexion internet est un peu dommageable mais la librairie peut être vraiment intéressante si on a beaucoup d'images à traiter. Autre petit plus intéressant, bien que ce soit une ligne de commande l'utilitaire affiche une comparaison avant/après et un pourcentage de gain en compression.

Tidy HTML

Cet utilitaire n'est pas à proprement parler un outil pour l'optimisation mais il s'en rapproche. TidYHTML permet de valider et de re-formatter un contenu HTML qui a été minifier auparavant, ce qui peut être pratique pour valider un HTML minifié.

J'ai rencontré quelque difficultés pour l'installer car les binaires ne fonctionnaient pas correctement j'ai donc utilisé apt-get pour l'installation. L'utilisation est on ne peut plus pratique et simple :

tidy -i index.html

On obtient en sortie du HTML valide correctement indenté, beaucoup plus pratique pour faire de la relecture. Par contre, je n'ai pas testé la librairie lorsque le HTML n'est pas valide, je n'ai aucune idée du comportement de la librairie.

JS Beautifier

Voici exactement le même principe pour le JavaScript, node-js-beautifier permet de beautifier du code JavaScript qui a été minifié. L'installation de cet utilitaire nécessite d'avoir Node.js d'installé sur votre poste et il faudra installer le module à la main et se placer dans le répertoire ou le module a été dézippé.

node beautify-node.js -i 1 fichier_input

C'est on ne peut plus simple et diablement efficace. Mais là ou la librairie est très intéressante, c'est qu'elle peut récupérer du JavaScript d'un site en local et le beautifier...

node beautify-node.js -i 1 https://static.johanbleuzen.fr/20110202/combined-min.js

Conclusion

Tous les traitements présentés dans cet article existent en service "web", mais avec des limitations liés au protocole HTTP et avec une exécution plus lente toujours à cause de HTTP. Il peut être fort intéressant de développer un script shell, perl, python (rayez la mention inutile) pour effectuer un traitement batch sur des milliers de fichiers à l'aide des utilitaires de cet articles. Après un petit temps d'apprentissage de ces différents outils, la ligne de commande deviendra vite votre meilleur amies.

Néanmoins, si vous n'aimez pas les lignes de commandes, je pense que vous avez arrêté votre lecture avant cette conclusion, mais sachez que si vous devez appliquer des traitements sur quelques dizaines de fichiers des applications natives peuvent suffire pour obtenir le même résultat sans toucher à une ligne de commande.

Petite déception pour ma part, je n'ai pas trouvé d'outil pour beautifier des CSS en ligne de commande, j'en avais développé un fonctionnant avec node.js pour le concours sur les WebPerfs mais je ne l'avais pas publié, peut être que si je le retrouve je le ferai...