Gulp au quotidien


Technique

Aujourd’hui, avant de se lancer dans un projet, une question revient : comment optimiser nos tasks récurrentes ?

Plusieurs solutions existent, et chacune répond à des besoins différents. Gulp, Grunt, Browserify et webpack pour ne citer que les plus connus.

Alors pourquoi Gulp ?

Gulp fait partie de la catégorie des “task runners”, c’est-à-dire qu’il exécute des tasks répétitives à votre place. Il est rapide à mettre en place et nécessite peu de configuration. C’est le compagnon idéal pour des projets de moyenne envergure.

À l’instar d’un Grunt, Gulp est potentiellement plus rapide sur certaines tasks, et sa rédaction plus simple.
64448266 Gulp au quotidien

Forrest Gulp

Gulp est un task runner puissant pour peu que l’on prenne le temps de bien le configurer. Ainsi avant de “run Gulp, run…”, il est important de bien avoir en tête notre structure de fichiers et les tasks dont nous aurons besoin.

Très souvent, nous retrouvons une task type qui a pour but de compiler, concaténer et minifier notre css. En plus de celle-ci, on peut trouver également une task script pour les fichiers javascript. Ces deux task sont souvent liées à la task watch qui a pour objectif d’écouter les changements sur les fichiers ciblés.

Mais ces tasks peuvent être optimisées, combinées, et complétées avec d’autres. Passons en revue les plugins qui peuvent enrichir nos tasks.

 

Plugins Gulp utiles

 

npm

npm logo Gulp au quotidienPremier réflexe pour installer un plugin à Gulp : npm. La plupart des plugins dispose d’une page dédiée sur npmjs.com, avec un minimum de docs, d’exemples et aussi de stats.

 

 

browser-sync

logo gh Gulp au quotidien

Browser-sync permet de reloader de manière automatique sur tous vos devices de test après une task, par exemple la compilation du css.

browser sync Gulp au quotidien

 

gulp-sass

Compile le sass (forme indenté) et le scss.

gulp sass Gulp au quotidien

gulp-notify

Envoie une notification de son choix à travers l’ordinateur, telle que la réussite de la compilation, ou même son échec.

gulp notify Gulp au quotidien

 

gulp-babel

babel 300x136 Gulp au quotidien

Basé sur Babel.js, il permet d’écrire en ES6 et transcompile vers de l’ES5. Il est également pratique pour les projets en React.js, par exemple en compilant les fichiers JSX.

 

gulp-sourcemaps

Sourcemaps permet d’obtenir un retour précis dans les navigateurs en indiquant le fichier d’origine de l’élément inspecté ainsi que sa ligne, avant concaténation et minification.

 

gulp-autoprefixer

Basé sur caniuse.com, on lui donne une version de navigateur compatible, et autoprefixer va explorer vos css et ajouter tous les préfixes nécessaires.

 

gulp-rename

Permet de renommer de manière simple et efficace nos différents fichiers. On peut par exemple facilement ajouter le suffixe “.min” à nos fichiers minifiés.

 

gulp-uglify

Minifie le javascript.

 

gulp-useref

Useref va concaténer vos fichiers css ou js selon des instructions placées dans les fichiers html. Cela permet de fractionner des regroupements de certaines ressources, de changer les liens vers ces dossiers s’ils sont déplacés (comme pour une dist).

gulp useref Gulp au quotidien

gulp-concat

Regroupe en un seul fichier tous les fichiers css ou js sélectionnés.

 

gulp-if

Permet d’ajouter des conditions aux tasks, telles que “exclure un fichier” s’il contient telle ou telle extension.

 

gulp-plumber

Outil très utile car il permet par exemple de ne pas voir sa task watch s’arrêter si une erreur se glisse dans l’un de nos fichiers à traiter.

 

gulp-html-replace

Permet de remplacer des éléments situés dans un fichier html.

 

gulp-imagemin

Permet de minifier les images de type PNG, JPEG, GIF et SVG

 

gulp-load-plugins

Permet de charger tous vos plugins sans avoir à les déclarer. Il suffit simplement que leurs noms commence par “gulp-”.

 

 

webpack-stream

2105791 150x150 Gulp au quotidien

Permet d’utiliser la puissance de webpack dans Gulp afin d’optimiser certaines de vos ressources en modules.

 

Projet et gulp

Il va de soit que l’utilisation de Gulp ou d’un autre task runner dépend du type de projet que l’on doit mener à bien.

Dans le cas d’un projet sans utilisation avancée de framework ou d’un grand nombre de librairies, Gulp répond aux besoins. Pour des projets full-js plus ambitieux, il peut être intéressant de regarder du côté de webpack qui organise tout notre projet en modules et optimise leur utilisation.

Mais dans un premier temps, il est toujours possible d’intégrer partiellement webpack dans nos tasks Gulp afin de prendre en charge une partie de nos ressources.

Trois tasks principales peuvent répondre à nos besoins : Build, Styles et Scripts.

 

Scripts

Récupérer tous nos fichiers .js et les rassembler en un seul est l’idée initiale. Simplement, on peut faire des différences entre nos besoins en développement et en production.

Pour commencer, si nous utilisons du javascript ES6 ou du JSX par exemple, il est nécessaire de le convertir. En revanche, il n’est pas forcément utile de ralentir notre task avec de la concaténation et de la minification en période de développement. On peut donc garder avec useref des liens vers toutes les librairies externes et un lien vers une compilation de nos fichiers js custom. Tous ces fichiers seront concaténés en production.

 

Styles

Basée sur un fichier main.(sass, .scss ou .less en fonction des envies), cette task va récupérer toutes les partials et les compiler. Ici même chose, inutile de récupérer toutes les librairies externes ou de minifier. Par contre, il est important de bien placer l’autoprefixer afin de pouvoir tester correctement tous les navigateurs.

 

Build

Une task qui va vraiment dépendre des besoins de chaque projet.  Sur un petit projet sans cms, un fichier distinct – dist – compilé, concaténé et minifié où l’on déplacera toutes les ressources sera suffisant. Pour un thème wp, supprimer les ressources non utiles en production sera tout indiqué.

 

Deploy

Task facultative tant elle dépend de l’environnement de production. Sur de petits projets, il est possible de mettre en place grâce à Rsync un déploiement du projet sur le serveur, ou bien de compiler nos ressources depuis notre serveur privé pour les déployer sur ce même serveur.
6200624 300x300 Gulp au quotidien

Pour finir et parce qu’on est sympa, voici quelques-uns de nos tips, utilisés chez DISKO :

– Ajouter des variables, pour les path ou les types de fichiers, afin de définir par exemple si l’on utilise du .sass ou .scss, ou bien le nom du module sur lequel on travaille.

-Combiner Gulp avec un moteur de template comme handlebars par exemple afin de pré-rendre vos vues et ainsi gagner en performance.

-Garder son repository git clean de tout fichier compilé. Cela permet de sauver de l’espace de stockage (l’augmentation des besoins de stockage devient un problème environnemental), de limiter les problématiques de merge sur les fichiers minifiés, et enfin de conserver une architecture plus simple et plus propre.

On peut également créer un générateur de Gulp avec Slush. À la manière d’un Yeoman, nous pouvons utiliser les generators déjà disponibles ou bien créer le sien, en proposant en option les noms de variables, les types de css utilisés ou les librairies à ajouter au projet. Enjoy Gulp!

 

 

Laisser un commentaire