Tutoriaux divers et variés

3WA / Introduction à GULP <3

Par le 12 janvier 2018 dans Énoncés exercices, Support 3WA | 0 commentaire

Introduction

Gulp, kwaksé ?

Gulp est, EN TRES GROS, un logiciel permettant d’effectuer à votre place des opérations répétitives et inintéressantes au possible mais qui vous assurerons des sites web de qualités et optimisés.

Comment ça marche ?

Gulp vous permettra d’utiliser des ‘plugins’ vous permettant chacun d’effectuer des opérations spécifiques, selon les instructions que nous lui donnerons.

On ne va pas trop rentrer dans le détail car ça prendrait 20 ans, c’est pour ça que cela reste une introduction.
Je vous laisserai des pistes pour la suite (plugins recommandés, exemples, etc.)

A quoi ça sert ?

Ça nous permet de différencier deux parties dans notre projet : la source (notre base de travail), et le build (projet compilé / optimisé) et de créer une fonction qui s’occupera de compiler le sass, de regrouper les css, les js, et de rafraîchir automatiquement le navigateur en cas de modification.

Nous allons donc voir

  1. L’installation
  2. La création d’un projet
  3. Kwaksé Npm
  4. La tâche de base
  5. Installer un plugin et l’utiliser
  6. Les plugins principaux ( ultimate powaaah )
  7. Une fonction pour les diriger toutes

 

1. Installation sur les postes de la 3WA

Les lancements d’instructions se feront depuis la console (Démarrer > Terminal).

Derrière > seront les instructions à taper/copier coller  dans le terminal, le reste seront des commentaires :

	// récupérer nvm
	> wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.33.7/install.sh | bash

	*Relancer le terminal*

	// Mise à jour au cas ou
	> apt-get update

	// Installer node, qui contient npm
	> nvm install node
	> npm -v

	// Installer gulp
	> npm i -g gulp
	> gulp -v

2. Créer un nouveau projet

	> cd Bureau/
	> mkdir boilerplate_gulp
	> cd boilerplate_gulp
	> npm init

Appuyer sur entrée à chaque question (création d’un projet par défaut).

Installer gulp pour le projet en cours (vous devez être à la racine du projet, pas dans le dossier src)

	> npm i -D gulp

2.1 Avoir une bonne structure

Afin de simplifier l’exemple, récupérez un modèle de boilerplate déjà tout prêt, par exemple l’excellent html5boilerplate.

Au niveau de la structure de dossiers, ajouter ce boilerplate dans un nouveau dossier /src situé dans le dossier de votre projet.
Il s’agira de votre base de travail (la ou vous effectuerez vos modifications).

A la racine de ce boilerplate, nous allons installer gulp en local, c’est à dire directement dans le projet (ca merdouille un peu sur les postes 3WA).

Dans votre terminal, accédez à votre dossier :

	> npm i -D gulp

Je vous recommande maintenant d’ouvrir le dossier à la racine (Bureau/boilerplate_gulp) dans votre éditeur de texte.

Enfin, créez un nouveau fichier  « gulpfile.js », toujours à la racine de votre projet (pas dans /src !)

Vous devriez avoir cette structure :

Gulp : Exemple de dossier après les premiers pas :D

Gulp : Exemple de dossier après les premiers pas :D

3. Qu’est-ce que Npm ?

Npm est une commande permettant de récupérer et maintenir facilement des morceaux de code.

Par exemple lors de l’installation, nous avons récupéré gulp via la commande npm i -g gulp.
i étant le raccourci pour install, et -g pour lui dire l’installer globalement (accessible depuis n’importe quel dossier du pc).

Pour l’installation en local -D indique qu’on l’installe uniquement pour l’utiliser pour programmer, et non pour le rendu final ( /build, que nous verrons après).

Nous allons maintenant utiliser npm pour récupérer des petits plugins dédiés à gulp et au dev web en général.

 

4. La tâche principale

Plus de détails avec la doc officielle.

4.1 Base de travail

Pour cela, nous allons avoir besoin d’un fichier de configuration pour gulp, qui doit s’appeler gulpfile.js et que nous devons créer nous même.

Voici un exemple de fichier gulpfile.js (gulp v4) gulpfile.js (gulp v3), qui ne fait rien. Mais vous pouvez le tester dans la console avec la commande gulp.
Au moins il n’y a pas d’erreurs.

Le fichier est découpé en 3 parties

  • Les constantes, qui font référence aux plugins
  • Les fonctions, prêtent à être utilisées, qui effectue chacune une ou plusieurs actions
  • Les tâches, qui seront les commandes à appeler depuis la console

 

4.2 Faire un truc utile

Nous disposons d’un dossier src/ pour travailler, nous allons maintenant utiliser gulp pour générer automatiquement notre dossier build/ qui contiendra le site tout beau tout propre prêt à être mis en ligne.

Pour cela, nous allons créer une fonction dédiée, qui utilisera les 3 principales fonctions de gulp : src, pipe et dest.

Voici un exemple de fichier gulpfile.js (gulp v4) gulpfile.js (gulp v3) simple & commenté qui permet de copier l’intégralité des fichiers de /src vers /build.

Dans les prochaines étapes, nous verrons comment altérer ces fichiers et dossiers *-*

 

5. Installer un plugin et l’utiliser

Après avoir trouvé un plugin sur npm ( par exemple compresser le css ) et lu la doc d’utilisation..

On l’ajoute à notre projet

	> npm i -D gulp-clean-css

Puis on l’utilise en suivant la doc (il faut compléter le fichier gulpfile.js) , exemple de gulpfile.js (gulp v4) gulpfile.js (gulp v3).

On a donc une fonction qui permet de créer notre nouveau dossier, avec le css minifié !

 

6. Les plugins principaux / base de travail saine / Faire le café

Tout cela c’est un peu fastidieux à mettre en place, mais l’avantage c’est que vous n’effectuerez la mise en place qu’une seule fois.
Ensuite, vous pourrez l’utiliser quotidiennement, sans avoir à y retoucher.

Et maintenant, il est temps de transformer tout cela en über travailleur non payé.

Même tarif pour

Exemple de gulpfile.js (gulp v4) gulpfile.js (gulp v3).

Exemple de gulpfile.js (gulp v4) gulpfile.js (gulp v3).

 

NOTE IMPORTANTE : La mise en place du « watch » est plus complexe que les autres tâches, je vous recommande donc de passer directement par le projet d’exemple final ;)

Exemple total :190326__bp_gulp (gulp v4) 180330__bp_gulp.zip (gulp v3).

Pour l’utiliser :

> npm i
> gulp watch

(si bug du à la dernière version de npm)
> npm i natives

Have fun

 

Compléments

Se renseigner sur package.json (la gestion de npm), gulpfile.js (la gestion des tâches gulp).

Bloqué sur les postes 3WAcademy, mais je vous recommande chaudement de jeter un oeil du coté de yarn ; qui ressemble très fortement à npm mais avec de meilleures perfs.

 

Alternatives

Si gulp vous botte, je vous recommande de jeter un oeil à

  • brunch : plus abordable ; grosso merdo gulp déjà tout prêt à fonctionner, un peu plus rapide mais plus limité et moins personnalisé
  • webpack : Full JS, un peu plus complexe (notamment à cause de la documentation un peu cryptique) mais très performant. Je vous recommande les tutos de grafikart pour la mise en place et l’utilisation
  1. Les fonctions principales

Tags: , , , , , , , , , , , , , , , , , , , , , , , ,

Poster une réponse

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>