Automatiser sa productivité avec Gulp 12/07/2016

Il est parfois difficile voir fastidieux d'optimiser son travail et son code. Normes qui changent, utilisation des dernières technos en date... tant de freins qui peuvent ralentir la productivité. Mais heureusement pour nous des outils existent pour nous rendre la vie plus facile.

Il y a quelques temps j'ai eu l'occasion de suivre une formation donnée par un développeur front-end qui n'est autre que David Leuliette. Pour ceux qui le connaissent, inutile de le présenter, pour les autres je le définirais comme un hardcore-développeur comme on peut en croiser beaucoup à ChtiJS.

Et donc durant cette formation où plusieurs outils pour améliorer sa productivité ont été présentés, l'un d'entre eux m'a tout de suite interpellé. À me demander comment j'ai pu m'en passer. Cet outil qui semble si révolutionnaire n'est autre que Gulp (Grunt like). Et oui, rien de bien extraordinaire pour ceux qui connaissent déjà, mais si comme moi des dev ne l'utilisent pas encore alors je leur conseille vivement de s'y mettre de suite.

Pour cela rien de plus simple :

npm install --global gulp-cli

Et voilà c'est prêt, enfin presque. Après avoir lié la dépendance à votre projet et créé votre fichier gulpfile.js, il ne vous reste plus qu'à lui lister des tâches et elle s'exécuteront toutes seules à la sauvegarde de vos fichiers. De plus, le tout est gérable via un simple fichier javascript. Il suffit donc de créer une écoute sur la sauvegarde de vos fichiers et d'y associer une tâche de votre choix.

Bien évidemment, de base, gulp ne vous sera pas d'une grande utilité. C'est pourquoi vous allez devoir recourir à des plugins et croyez moi il en existe pour un bon nombre d'utilisations. Que ce soit pour minifier vos fichiers, compiler votre sass, préfixer votre css, minifier vos fichiers, concaténer plusieurs fichiers en un seul, lancer le reload de votre navigateur... et bien d'autres.

Il est également très facile de combiner les plugins entre eux. Par exemple, si j'ai plusieurs fichiers .sass, je peux très bien imaginer une tâche qui compile les fichiers, les concatènes en un seul fichier, préfixes le css, minifie ce fichier, renomme ce dernier en .min.css et enfin reload non pas le navigateur, mais uniquement la feuille de style.

Ceci n'est qu'un exemple des possibilités que nous offre Gulp. En combinant les bons plugins il est facile et rapide d'optimiser son développement et son code. C'est ce qui en fait un excellent outil de travail front-end dont je ne peux me passer aujourd'hui.

Article de Pierre-Adrien Buisson pour bien commencer avec Gulp.