Comment concaténer des fichiers css avec guard-concat, A Unix Mind In A Windows World

« Concaténer » : derrière ce terme barbare se cache une opération qui consiste à fusionner dans un seul fichier plusieurs autres fichiers css ou js .
Concaténer c’est utile . Cette opération permet de créer un seul fichier là où avant il y en avait plusieurs: ce faisant, on diminue le nombre de requêtes au serveur et ainsi on gagne en temps et vitesse de chargement de la page web.
Il existe plusieurs façons de concaténer, notamment par le biais des très bons Gulp et Grunt . Personnellement, ma méthode de concaténation fait appel à une gemme ruby déjà évoquée sur ce blog : guard et plus précisement guard-concat .
Pour concaténer, installez, si ce n’est pas déjà fait, rubygems et ruby-dev .

sudo apt-get install rubygems ruby-dev

Ensuite, installez guard concat

sudo gem install guard-concat

Naviguez ensuite jusqu’au dossier racine de votre site web ou votre web app et créez un fichier .guardfile

guard init

ouvrez ensuite ce dernier (avec un éditeur avec des droits root, gedit ou sublime text devrait faire l’affaire). Modifiez la ligne concernée par la concaténation des css en y ajoutant les fichiers à concaténer, ainsi que le nom du fichier sortie.

Hein ?

Bon, disons que vous avez un dossier « css » avec dedans « grosfichier1.css » , « chtifichier.css » et « cssquisertarien.css » et que vous voulez créer un fichier style.css contenant les instructions des 3 fichiers précédemment mentionnées.
La ligne concernée de votre fichier .guardfile devra donc être

guard :concat, type: « css », files: %w(grosfichier1 chtifichier cssquisertarien ), input_dir: « css« , output: « css/style« 

ah..

Lancez ensuite guard ( guard ) et vos fichiers seront fusionnés, que dis-je, concaténés dans un fichier style.css

Jean Luc Houedanou