Compresser automatiquement ses fichiers javascript et CSS

Quand on développe une page ou un site Web, il arrive souvent que l'on utilise plusieurs fichiers de styles CSS et plusieurs fichiers de script (Javascript).

Les bonnes pratiques du Web recommandent d'avoir pour chaque page html un seul et unique fichier de style et un seul et unique fichier de script. Idéalement ces 2 fichiers doivent également être comprimés (cad : sans caractère inutile, sans commentaire, etc ...).

Sites Web

Plusieurs sites Web proposent un service en ligne permettant de comprimer du CSS et/ou du Javascript soit à partir de l'upload d'un fichier soit à partir d'une zone de saisie.

Programmes ou APIs

Il existe également plusieurs programme ou API plus ou moins puissante ...

Makefile ad hoc

Je souhaitais mettre en place en un minimum de temps une procédure automatique me permettant de compresser et regrouper mes fichiers javascript et css.

Après une tentative d'installation infructueuse de juicer, j'ai rapidement écrit un petit fichier Makefile qui fait parfaitement l'affaire.

Avec seulement, les commandes cat et curl je génère un fichier script.min.js et un fichier style.min.css à partir de plusieurs fichiers css et js présent dans mon répertoire.

Simple, rapide, efficace, ...

all: style.min.css script.min.js

style.css : file1.css file2.css file3.css
 cat $^ > $@

style.min.css : style.css
 curl http://www.refresh-sf.com/yui/ -F type=CSS -F compressfile[]=@$^ | \
  grep "<textarea" | grep "class=\"output\"" | \
  sed -e "s/<\/textarea>//g" \
  -e "s/<textarea rows=\"20\" cols=\"80\" class=\"output\">//g" \
  -e "s/^\s*//g" \
  -e "s/\s*$$//g" \
  -e "s/&amp;/\&/g" \
  -e "s/&lt;/</g" \
  -e "s/&gt;/>/g" \
  > $@

script.js : file1.js file2.js file3.js
 cat $^ > $@

script.min.js : script.js
 curl http://www.refresh-sf.com/yui/ -F type=JS -F compressfile[]=@$^ | \
  grep "<textarea" | grep "class=\"output\"" | \
  sed -e "s/<\/textarea>//g" \
  -e "s/<textarea rows=\"20\" cols=\"80\" class=\"output\">//g" \
  -e "s/^\s*//g" \
  -e "s/\s*$$//g" \
  -e "s/&amp;/\&/g" \
  -e "s/&lt;/</g" \
  -e "s/&gt;/>/g" \
  > $@

clean: script*.js style*.css
 rm $^