Gulp.JS

Si tu ne sais pas ce qu’est Gulp.JS , je vais tenter de te l’expliquer dans cet article. Tu sauras ce que c’est, pourquoi l’utiliser , comment l’installer et comment le configurer pour un projet.

Un « Task Runner »

Gulp est un task runner, littéralement traduit, cela signifie un « lanceur de tâche ». En gros, Gulp effectue des tâches pour toi, développeur feignant que tu es. Par exemple, grâce à lui tu pourras :

– Compiler ton SCSS avec la commande que tu auras toi même définie.

– Créer et lancer un petit serveur local rapidement avec rafraîchissement instantané de tes modifs.

– Minifier ton CSS et/ou ton JS.

– Optimiser tes images.

Installer Gulp.JS

Pour installer Gulp, tu auras besoin d’installer Node.JS qui est fourni avec son merveilleux gestionnaire de paquets NPM. Une fois en possession de la bête tu seras en mesure d’utiliser les commandes préfixées par « npm » et puisqu’on en parle , je te laisse lancer cette commande :

Tu remarqueras que j’ai volontairement rajouté le -g à la fin de la commande afin d’installer notre « joujou » de manière globale. Cela signifie que tu pourras réutiliser les commandes fournies avec Gulp un peu partout sur ton système.

« Et maintenant ? que vais-je faaaaaaire ? « 

Maintenant que tout est installé, on va pouvoir passer au vif du sujet.

PAS DU TOUT.

Nous avons installé Gulp d’accord, mais nous n’avons toujours pas initialisé un projet qui utilise Gulp. Pour cela rien de trop compliqué non plus. En premier lieu tu dois initialiser un projet à l’aide de cette commande :

Ici, le « -y » signifie que je veux dire « oui » à toutes les questions qui seront posées dans le terminal suite à l’utilisation de cette commande. Essayez sans et vous verrez que vous allez devoir remplir tout un tas d’informations renseignant votre projet. Vous pouvez très bien le faire maintenant ou bien comme moi, préférez le remplir plus tard dans le fichier package.json, fichier qui sera créé à la suite de cette commande.

Ok très bien, maintenant on va dire qu’on veut utiliser Gulp dans notre projet. Pour cela on va lancer la commande suivante :

Utiliser Gulp sur son projet

Vérifie dans ton fichier package.json que tu as bien Gulp en tant que dépendance de ton projet.

Voila maintenant tout est prêt ! Tu es prêt à utiliser Gulp.JS . Si à un moment donné quelque chose c’est mal passé, je te laisse te diriger sur le site officiel qui explique très bien le déroulement de l’installation. Dans un prochain article nous parlerons de l’utilisation de Gulp.Js avec SASS