38.3 Pour faciliter la combinaison et la minification

Je vous présente ici quelques techniques pour faciliter l'opération de combinaison et de minifications de fichiers CSS et JS.

Terminal

Plusieurs outils permettent d'effectuer le travail à l'aide de commandes dans une fenêtre Terminal, par exemple :

• Laravel Mix qui est installé par défaut avec Laravel. Notez qu'il est possible d'automatiser le travail dès qu'un fichier à minifier est modifié.
• Terser (branche de UglifyJS qui supporte ES6)
• YUI Compressor
• Closure Compiler
• CSSO

Outils automatisés

Si vous optez pour l'automatisation, vous aurez plus de travail à réaliser pour installer et configurer les outils requis. Par contre, l'opération de combinaison et de minification sera par la suite très facile à réaliser.

Je vous propose quelques procédures pour configurer différents outils dans PhpStorm.

Combinaison et minification du JavaScript à la ligne de commande de PhpStorm avec Terser

Terser est une branche de UglifyJS qui supporte la version ES6 de JavaScript, aussi appelée ECMAScript 2015 ou JavaScript 6.

Terser peut combiner et minifier vos fichiers JavaScript directement dans PhpStorm :

• Téléchargez et installez Node.js sur votre poste de travail à partir de ce site : https://nodejs.org/en/#download.

  Sous Mac, ceci ajoutera le dossier /usr/local/lib/node_modules.

  Sous Windows, le chemin sera plutôt C:\Users\MonNom\AppData\Roaming\npm\node_modules.

• Ouvrez la fenêtre de Terminal de PhpStorm : View / Tool Windows / Terminal.
• Dans la fenêtre de Terminal de PhpStorm, lancez la commande suivante (notez le -g qui indique que Terser pourra être utilisé en ligne de commande) :
  Terminal

  sudo npm install terser -g

  Ceci installera Terser dans le dossier node_modules créé plus tôt. Si vous omettez l'option -g, Terser sera installé dans un dossier node_modules placé sous le dossier courant.
• Toujours dans la fenêtre de Terminal de PhpStorm, assurez-vous d'être placé à la racine de votre projet en entrant la commande :
  Terminal

  pwd

  Au besoin, changez le dossier à l'aide de la commande cd.
• Placez-vous dans le dossier qui contient votre code JavaScript.

  Par exemple, dans un projet PHP vanille :

  Terminal

  cd js

  Dans une extension WordPress (changez les / pour des \ sous Windows) :

  Terminal

  cd wp-content/plugins/monextension/js

• Lancez la commande suivante pour combiner et minifier vos fichiers JavaScript. Remplacez app par le nom à donner au fichier minifié.
  Terminal

  terser fichier1.js fichier2.js fichier3.js --compress --mangle --output app.min.js

Minification automatique lors du changement du code JavaScript

Il est possible de configurer l'extension File Watchers dans PhpStorm afin de lancer automatiquement une action dès qu'un fichier est modifié. Ici, je vous montre comment minifier automatiquement un fichier JavaScript.

• Si ce n'est pas déjà fait, téléchargez et installez Node.js sur votre poste de travail à partir de ce site : https://nodejs.org/en/#download.
• Assurez-vous que l'extension File Watchers est activée dans PhpStorm.
  • Rendez-vous dans le menu Files / Default Settings (Windows) ou PhpStorm / Preferences (Mac) puis Plugins.
  • Dans la zone de recherche, entrez File Watchers.
  • Vous saurez que l'extension est activée si elle apparait dans l'onglet Installed.

    

• Ouvrez la fenêtre de Terminal de PhpStorm : View / Tool Windows / Terminal.
• Si ce n'est pas déjà fait, installez Terser à l'aide de npm.
• Terminal

  sudo npm install terser -g

• Rendez-vous dans le menu Files / Default Settings (Windows) ou PhpStorm / Preferences (Mac) puis Tools / File Watchers.
• Cliquez sur le + au bas de la fenêtre puis choisissez Uglify JS puisqu'il s'agit de la branche mère de Terser.

  

• Dans la fenêtre qui apparaît, entrez Terser dans la zone Name.
• Vous devez spécifier l'emplacement du fichier exécutable de Terser. Sous Mac : /usr/local/lib/node_modules/terser/bin/terser. Sous Windows : C:\Users\MonNom\AppData\Roaming\npm\terser.
  

  

• À partir de ce moment, dès que vous modifiez un fichier .js, il sera compressé avec l'extension .min.js.

Si vous souhaitez arrêter la minification automatique, rendez-vous dans le menu Files / Default Settings (Windows) ou PhpStorm / Preferences (Mac) puis Tools / File Watchers puis enlevez le crochet devant Terser.

Combinaison et minification des feuilles de style à la ligne de commande de PhpStorm avec CSSO

CSSO fait un travail semblable à Terser mais pour les fichiers CSS. Malheureusement, il n'offre pas la possibilité de combiner plusieurs fichiers. Il ne fait que la minification d'un seul fichier.

Pour l'utiliser, reprenez les étapes pour Terser mais cette fois, installez CSSO :

Placez-vous dans le dossier qui contient les feuilles de style à combiner et minifier puis lancez la commande :

Minification automatique lors du changement de la feuille de style

Les File Watchers de PhpStorm travaillent bien avec CSSO.

Reprenez les étapes pour Terser mais cette fois, après avoir cliqué sur le + pour ajouter un File Watcher, choisissez CSSO CSS Optimizer.

Toutes les valeurs entrées par défaut sont correctes. Il ne vous reste plus qu'à modifier vos feuilles de style, chacune sera automatiquement minifiée à chaque modification que vous y apportez.

Pour plus d'information

« The complete best practices for minifying CSS ». LogRocket. https://blog.logrocket.com/complete-best-practices-minifying-css/

« terser/terser ». GitHub. https://github.com/terser/terser

« Minifying JavaScript ». JetBrains. https://www.jetbrains.com/help/phpstorm/minifying-javascript.html

« Minifying CSS ». JetBrains. https://www.jetbrains.com/help/phpstorm/compressing-css.html

« Minify CSS with PhpStorm automatically ». speich.net. https://www.speich.net/articles/en/2019/12/30/automatically-minify-css-with-phpstorm/