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.

	> 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).

 

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).

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, 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 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, exemple de gulpfile.js.

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

  • Minifier le js / https://www.npmjs.com/package/gulp-uglify

Exemple de gulpfile.js.

  • Fusionner les fichiers css ensemble, les fichiers js ensemble / https://www.npmjs.com/package/gulp-concat

Exemple de gulpfile.js.

  • Utiliser un programme qui va actualiser le navigateur à ta place en cas de modification / https://www.npmjs.com/package/browser-sync

Exemple total : 180112__bp_gulp.zip.

Pour l’utiliser :

> npm i
> gulp watch

Have fun

 

Compléments

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

 

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>