Gulp, pour un environnement de travail confortable

Introduction

La légende raconte que dans les prémices d’internet et du web, les développeurs alliaient HTML, CSS et JavaScript dans leur forme la plus pure. Oui Monsieur, moi d’mon temps, on avait pas tout ces pré-processeurs ou autres frameworks, on codait un site de A à Z, assemblé à la main !

Et bien heureusement, ces temps archaïques sont révolus.

 

La problématique, c’est qu’au bout d’un moment, tout le monde a commencé à faire sa petite tambouille de son côté. Les navigateurs implémentent les fonctionnalités web chacun à son rythme, différentes communautés créent des compilateurs pour rendre les langages web plus modulables… De plus, on sensibilise beaucoup les développeurs sur l’optimisation des performances.

Comment jongler avec tous ces différents paramètres sans doubler ses lignes de codes ? Une réponse plausible en 4 lettres: Gulp.

Gulp, c’est quoi ?

 

Ce petit outil ingénieux fait parti de la famille des « taskers », les systèmes d’automatisation de tâches. Dans l’idée; on pose nos fichiers à l’entrée d’une grosse machine et ils en ressortent adaptés, optimisés, utilisables partout.

 

Mais chaque projet répond à des demandes et des attentes différentes, et donc la configuration de notre machine également. Voici toutefois quelque exemples que nous utilisons souvent à 8bitstudio

Les tâches

Initialisation

On lance d’abord BrowserSync. Il a deux avantages conséquents: premièrement, la page sur laquelle nous travaillons se met à jour automatiquement lorsque l’on enregistre une nouvelle version d’un fichier. Mieux encore, il injecte le CSS dynamiquement sans même devoir recharger la page ! Conséquence: l’éditeur à gauche, le navigateur à droite, et notre travail qui apparaît à chaque coup de Cmd+s.

Deuxième avantage, il est synchronisé sur les différents appareils en local. En d’autres termes: quand je navigue sur mon smartphone, les pages scrolls et changent sur ma tablette et mon ordinateur.

CSS

Le CSS a souvent fait perdre des cheveux aux développeurs. Heureusement, Sass permet de l’écrire de manière plus agile: utilisation de variables, mixins, nesting… Gulp nous permet de compiler ces fichiers en CSS. Mais pas seulement… il ajoute également les préfixes pour que chaque fonctionnalité soit supportée par tous les navigateurs.

JavaScript

Il y a malheureusement une grande différence entre les dernières fonctionnalités JavaScript  et celles supportées par les navigateurs. Pour faire le lien, il y a Babel: l’équivalent de Sass pour JavaScript. Il nous permet d’être plus confortable et d’utiliser les nouveautés avant l’heure sans problème de comptabilité. Pour une meilleure structure, nous séparons nos fichiers, qui sont ensuite fusionnés en un unique main.js.

Icons

Il est toujours délicat d’utiliser les icones et les images des graphistes sans perdre en performance. Pour cela, nous avons mis en plus une autre tâche qui s’occupe de compresser le tout garantissant aucune perte de qualité. Les SVG sont transformés en font pour une utilisation plus agréable et optimisée.

Environnements

Vous connaissez globalement les différentes tâches principales que nous utilisons pour développer le site. Mais lorsqu’un site est terminé, il ne faut justement pas baisser sa garde; des travaux de tests et de rapidités restent à faire.

Pour cela, nous relançons les tâches précédemment citées en mode “production”. Ainsi, chaque fichier sera passé au crible fin pour le minimiser: tout réunir dans un fichier, supprimer les espaces et autres bouts de codes inutile, mettre le tout sur une ligne. Et pour avoir un suivi, un petit rapport nous est rendu à la fin du script pour constater l’espace gagné.

Conclusion

Nous avons une philosophie d’amélioration continue: se tenir à jour et optimiser nos environnements de travail. Nous continuons à nous renseigner quotidiennement comment améliorer nos méthodes. À mesure que nous apprenons de nouvelles technologies, nous adaptons nos taskers en conséquence, pour notre confort et la qualité de notre code.