My Own Memory Hole
Blog♯dev

Quels outils pour réduire CSS et JS ?

cleancss

$ sudo apt install cleancss

Ensuite, il suffit de lancer la commande :

$ cleancss -o mon_fichier.min.css mon_fichier.css

Traitement par lot

Mais c'est un peu lassant de répéter cette opération lorsque l'on a de multiples fichiers à traiter. J'ai donc adapté le script proposé par Marco G qui utilise yui-compressor.

On crée donc le script mincss dans un répertoire bin de notre home puis on le rend exécutable avant d'y coller le script ci-dessous :

$ mkdir /home/$USER/bin
$ touch /home/$USER/bin/mincss
$ chmod +x /home/$USER/bin/mincss
$ nano /home/$USER/bin/mincss
#!/bin/sh
echo Compressing CSS Files...
saved=0
for f in `find -name "*.css" -not -name "*.min.css"`;
do
    target=${f%.*}.min.css
    echo "\t- "$f to $target
    FILESIZE=$(stat -c%s "$f")
    cleancss -o $target $f
    FILESIZEC=$(stat -c%s "$target")
    diff=$(($FILESIZE - $FILESIZEC))
    saved=$(($saved + $diff))
    echo "\t  $diff bytes saved"
done
echo "Done ! Total saved: $saved bytes"

UglifyJS

Pour les fichiers Javascript, j'utiliser UglifyJS

$ sudo apt install node-uglify

ou en utilisant npm l'utilitaire de gestion des paquets de NodeJS :

$ sudo npm install -g uglify-js

La commande uglifyjs est désormais disponible :

$ uglifyjs mon_fichier.js -o mon_fichier.js.min.js

Ajouter la compression :

$ uglifyjs mon_fichier.js -o mon_fichier.minc.js -c

Ajouter en plus l'« altération » :

$ uglifyjs mon_fichier.js -o mon_fichier.minc.js -m

On peut ainsi lancer la commande pour n'obtenir plus qu'un fichier à partir de tous les fichiers spécifiés :

$ uglifyjs *.js -o output.js -c -m

uglifyjs-folder

Pour traiter l'ensemble des fichiers d'un répertoire (et de ses sous-répertoire), on peut également utiliser uglifyjs-folder.

$ sudo npm install -g uglifyjs-folder

Pour compresser tous les fichiers d'un répertoire, il suffit de lancer :

$ uglifyjs-folder mon_dossier/ -o script.min.js

On peut aussi vouloir conserver des fichiers séparés, ce que permet l'option -e ; dans un tel cas, l'arborescence du dossier traité est conservé dans le répertoire indiqué avec l'option o :

$ uglifyjs-folder ../test/ -o output/ -e

Accédez à ses sous-domaines de localhost sous Chromium ou Opera

Sous Chromium ou Opera, sous Xubuntu 15.04, il m'était impossible d'accéder à mes sous-domaines de localhost.

Opera était assez peu bavard et se contentait du message :

Cette page web n'est pas disponible

Impossible de se connecter à avec2.localhost.

Chromium était un peu plus bavard :

Page Web inaccessible

DNS_PROBE_FINISHED_NXDOMAIN

Pourtant, mes sous-domaines de localhost sont bien définis dans mon /etc/hosts et je ne rencontre aucun souci pour y accéder avec Firefox (ce n'est plus le cas en 2020... voir cet article).

Après quelques recherches et quelques tentatives infructueuses, j'ai découvert une page de Chromium permettant de « suivre » le cache DNS de Chromium : chrome://net-internals/#dns.

On commence par purger le cache puis on essaie d'accéder à l'un de ses sous-domaines.
On peut alors voir apparaître une ligne de ce type :

localhost.  IPV4    error: -105 (ERR_NAME_NOT_RESOLVED) 2015-07-26 23:07:56.563 [Expired]

Suivent d'autres recherches qui aboutissent à un commentaire d'un des rapports de ce « bug » (qui est en fait une feature...)

On modifie donc son fichier /etc/hosts en y ajoutant simplement cette ligne :

    127.0.0.1   localhost.

Et tout rentre dans l'ordre, aussi bien sous Chromium que sous Opera.