Comment faire aujourd’hui pour ce passer de tels outils lorsqu’on prétend travailler de façon professionnel dans le domaine du web. Je parle des task runner et en particulier de « Gulp », mais je ne suis pas sectaire peut-être certains préféreront « Grunt », c’est la même philosophie.

Mais c’est quoi un task runner ?

Les sites web répondent aux mêmes exigences que n’importe quel produit, celui d’être fabriqué selon un process de qualité itératif et complexe (minifier les CSS et JS, optimiser les images…) bref une multitude d’opérations ennuyeuses et chronophages. Vous l’aurez compris Gulp représente un gain de temps vous évitant de vous balader sur plusieurs sites pour par exemple minifier vos CSS… C’est en cela que les Task Runner sont devenus très importants dans un projet web. Il faudra pour cela se familiariser avec la console ou le terminal pour lancer les lignes de commande, mais c’est un apprentissage qui sera payant in fine.

Ces outils se sont bien intégrés dans la sphère du développement web notamment dans les développements front-end mais pas seulement, car tous ce qui peut être automatisé trouvent un vrai bénéfice dans l’utilisation de Gulp ou Grunt. Vous avez Yeoman qui utilise Grunt. Vous avez Ionic Framework qui utilise Gulp pour vous démontrer l’intérêt qu’ils suscitent…

Comment ça fonctionne ?

sources:Putaindecode.io

Je ne vais pas faire ici un tuto d’installation, mais plutôt de vulgarisation afin de décrire les mécanismes qui participent au fonctionnement de ces outils. Les tâches comme minifier une feuille de style CSS nécessite un script exécuté sur votre machine. On aura donc besoin d’un moteur pour lancer ces actions de façon ponctuelle ou en cascade de façon automatisée. Le moteur utilisé dans le développement côté serveur web local est Node.js ce n’est qu’un interpréteur JavaScript enrichi avec diverses API (appelées module) qui permet d’exécuter des fichiers .js.
La première étape sera donc d’installer votre environnement node js soit à la ligne de commande avec le terminal soit avec la package distribué sur le site officiel.
En suite il faudra installer Gulp, là pas le choix les outils tels que Node.js, nmp ou gulp ont été conçus pour être exécutés en ligne de commande, c’est à dire dans une fenêtre d’instructions très rudimentaire.
Les commandes npm sont relativement simple, normalement pas de quoi déclencher votre allergie au code.

La création d’un nouveau projet

Je passe les étapes pour en venir à la création d’un nouveau projet. Il faudra néanmoins comprendre la structure du projet, effectivement on est un peu en mode développeur à ce niveau. Techniquement si l’installation s’est bien déroulée les choses vont se passer sur deux fichiers :
package.json qui contient la liste des plugins gulp (ou autres) nécessaires à vos tâches et gulpfile.js qui contient la liste des tâches à réaliser.

Comment automatiser les tâches et quels types de tâches

Ici, les objectifs peuvent varier sensiblement selon le profil et les gains espérés sur l’optimisation des tâches. je vais donc décrire des tâches qui m’intéressent en premier lieu, mais il faut comprendre qu’avec le moteur js et Gulp, vous pouvez faire presque tous types de tâches, sauf le café peut-être. Vous pouvez réfléchir aux tâches que vous faites cent fois dans la journée en vous demandant comment gagner du temps et bien Gulp le fait à coup sûr.

Pour ma part, le premier objectif est d’automatiser l’ensemble des tâches CSS au sein du projet : la compilation de LESS (ou Sass) vers CSS, l’ajout de préfixes CSS3, la minification du fichier CSS, et son renommage en « .min.css », par exemple. ou bien encore réordonner le code , le concaténer… Bref après toutes ces opérations vous obtenez la quintessence de votre feuille de style et tous ça en ayant fait un ou un car toutes ces actions se mettent en branle automatiquement dès lors que nous enregistrons nos modifications CSS.

Etendre les tâches

Une fois qu’on a optimiser les CSS, on peut penser à d’autres choses comme la minification des js, les polices de caractères ou encore les images, mais également envoyer ces éléments vers un autre serveur…
Pour ma part j’utilise les tâches suivantes :
> la conversion des fichier less en css avec renommage des fichiers (autopréfixer CSS3, minifier, réordonner)
> Optimiser les images (png, jpg) avec imagesoptim (le meilleur selon moi)
> Convertir SVG en polices web
> Générer des sprites SVG
> Envoyer les fichiers sur un serveur distant plus besoin de Filezilla (CSS, images et les sources less pour les collègues)
>…

Dans la mesure ou je suis pas développeur front-end et que j’opère généralement sur des serveurs en ligne dans le cadre d’un CMS comme Drupal, je n’ai besoin de convoquer que peu de tâches puisque les paramétrages serveurs ou ceux de Drupal permettent déjà de faire un certain nombre de tâches appréciables. Certaines opérations restent toutefois à ma main et l’utilisation de Gulp s’avère un atout sérieux au quotidien.