Comment utiliser Gulp sur Mac, Windows, Linux

Voir la version AMP

Gulp est un système de gestion de tâches. Il sert à par exemple: transformer votre Sass (ou Less) en css, minifier, utiliser autoprefixer, joindre des fichiers en 1 seul, vérifier vos JavaScript avec jsLint et j’en passe. Si vous codez le moindrement c’est pratique. C’est devenu un de mes outils indispensables et en plus c’est totalement gratuit. Il faut juste mettre un peu les mains à la pâte et vous serez conquis. C’est simple à installer, à utiliser et c’est rapide. Mais il ne faut pas avoir peur de terminal ou cmd ou autre…

GRUNT?

Les deux font les mêmes tâches, mais pas de la même manière. Gulp est plus jeune et compense pour certaines lenteurs de Grunt, mais il y a moins de plug-ins (juste 1894).

Grunt est mieux implanté  dans la communauté. Il a plus de plug-ins, mais il est plus lent dans son fonctionnement. Si vous aimez tout configurer, Grunt est fait pour vous.

Grunt après chaque «tâche» doit écrire le fichier même si la prochaine tâche travaille avec le même fichier.

Par exemple: on transforme un fichier scss en css et on le  «minify» par la suite.

Gulp va:

  1. Ouvrir le fichier
  2. Le transformer en css
  3. Le minifier
  4. Le sauvegarder à la destination souhaitée

Grunt va:

  1. Ouvrir le fichier
  2. Le transformer en css
  3. Sauvegarder le fichier temporaire
  4. Ouvrir le fichier temporaire
  5. Le minifier
  6. Sauvegarder le ficher temporaire
  7. Ouvrir le fichier temporaire
  8. Le sauvegarder à la destination souhaitée
  9. Effacer le fichier temporaire

Comment on l’installe:

Il faut premièrement installer node.js. Il y a une version pour Windows, Mac et Linux. Il faut absolument installer, en même temps que node, le NPM. Pour vérifier si tout est bien installé, vous avez juste à taper dans cmd ou terminal:

Si vous recevez une série de chiffres, c’est bon. Sinon il faut l’installer de nouveau.

La première étape est d’installer Gulp globalement (dans tout le tutoriel, s’il y a des « sudo » ne les tapez pas si vous êtes sur Windows. Sur Linux ou Mac, on vous demandera de taper votre password. Ce dernier ne s’affichera pas.)

Par la suite il faut se déplacer dans le dossier de votre projet (toujours dans terminal ou cmd). Là on tape:

Il vous demandera le nom de votre projet. Tapez-le sans espace ou caractères spéciaux. Il pose d’autres questions. C’est à vous de les entrer ou appuyer sur la touche «enter» à chaque question. À la fin, répondez par l’affirmative un fichier package.json a été créé dans le répertoire de votre dossier.

Par la suite, commencez l’installation de gulp et de certains plug-ins… Il y aura des messages de confirmation entre les différentes installations, mais pour rendre cela plus lisible je ne les marquerai pas. Aussi, dans cet exemple, je crée des tâches pour transformer du scss en css. Choisissez vos plug-ins sur npmjs.com en tapant gulp avec ce que vous voulez faire.

Vous pouvez laisser le terminal de côté et entrer dans votre éditeur de texte préféré.

Le fichier gulpfile.js

Ce fichier est en JavaScript et il est relativement simple à configurer. Il fera le lien entre votre installation et vos tâches.  Dans mon site web, mon arborescence est comme ci-bas:

Votre installation a créé un fichier package.json et un dossier node_modules qui contient «plein de fichiers»

Nous devons créer le fichier gulpfile.js

Votre première tâche est d’inclure les «require»; nous créons les variables nécessaires pour nos tâches.

La premiere tâche: «default – watch»

Gulp.watch vérifie constamment les fichiers indiqués pour lancer une tâche. Dans cet exemple, il regarde dans le répertoire sass et dans ses sous-répertoires pour un changement dans un des fichiers scss. Après, il lance la tâche «css».

on ajoute simplement des .pipe avec le nom des variables créées plus haut. Cela exécute la fonction.

Il ne reste plus qu’à, dans terminal ou cmd, écrire:

et il va regarder les fiches scss pour des modifications.

S’il n’y a aucune erreur, dès qu’une modification est apportée et sauvegarder, un fichier style.css va être créé dans le dossier css. Sinon, il y a une erreur dans le fichier gulpfile.js.

Le code en résumé:

Dans terminal ou cmd:

Le fichier gulpfile.js:

 

 

4 commentaires

Maxime Trudel

Finalement, après plusieurs essais, je suggère d’installer gulp-sass 2.1.0 beta. Il fonctionne mieux avec bourbon.io et comprend les arguments null que le gulp-sass par défaut ne comprend pas…

La ligne de commande est mise à jour dans l’article

Répondre
Maxime Trudel

Merci,
J’ai créé ce tutoriel, car je n’en ai pas trouvé d’excellents et d’assez complet de A-Z. Cependant, plusieurs versions des «plug-ins» ont été mises à jour depuis. Donc, c’est important de prendre la dernière version de node.js et des «plug-ins». Gulp sass ne nécessite plus le [email protected] et gulp-minify-css à été remplacer par gulp-clean-css.

Répondre

Laisser un commentaire

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