Quels outils pour réduire CSS et JS ?

le 22/07/2018 dans Linux #bash#console#Linux#terminal#web

cleancss

sudo apt-get 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-get 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