Articles /

Gulp pour les débutants

Gulp est un outil qui vous aide dans plusieurs tâches lorsqu’il s’agit de développement web. Il est souvent utilisé pour faire des tâches frontales comme :

  • Spinning up a web server
  • Reloading the browser automatically whenever a file is saved
  • Using preprocessors like Sass or LESS
  • Optimizing assets like CSS, JavaScript, and images

Important Note ! Cet article a été écrit pour Gulp 3.x, mais maintenant Gulp 4.x est sorti et recommandé. Comme tout changement de version majeur, les APIs ont des changements de rupture. Si vous installez Gulp 4 et essayez de faire certaines des choses dans cet article, elles ne fonctionneront pas. Nous prendrons quelques notes à ce sujet pour vous le rappeler. Cela ressemble à un assez bon démarreur de Gulp 4.

Ce n’est pas une liste exhaustive des choses que Gulp peut faire. Si vous êtes assez fou, vous pouvez même construire un générateur de site statique avec Gulp (je l’ai fait !). Donc oui, Gulp est extrêmement puissant, mais vous devrez apprendre à utiliser Gulp si vous voulez créer vos propres processus de construction personnalisés.

C’est donc à cela que sert cet article. Il vous aide à devenir si bon avec les bases de Gulp que vous pouvez commencer à explorer tout le reste pour vous-même.

Avant de plonger dans le travail avec Gulp, parlons de la raison pour laquelle vous pourriez vouloir utiliser Gulp par opposition à d’autres outils similaires.

Pourquoi Gulp?

Des outils comme Gulp sont souvent appelés « outils de construction » parce qu’ils sont des outils pour exécuter les tâches de construction d’un site Web. Les deux outils de construction les plus populaires à l’heure actuelle sont Gulp et Grunt. (Chris a publié un article sur les premiers pas avec Grunt ici). Mais il en existe d’autres, bien sûr. Broccoli se concentre sur la compilation des actifs, l’une des tâches les plus courantes des outils de construction.

Il existe déjà de multiples articles couvrant la différence entre Grunt et Gulp et les raisons pour lesquelles vous pourriez utiliser l’un plutôt que l’autre. Vous pouvez consulter cet article, celui-ci, ou celui-ci si vous êtes intéressé à en savoir plus. Brunch est similaire dans sa concentration sur les actifs, et il regroupe certaines des autres tâches les plus courantes comme un serveur et un observateur de fichiers.

La principale différence est la façon dont vous configurez un flux de travail avec eux. Les configurations de Gulp ont tendance à être beaucoup plus courtes et plus simples par rapport à Grunt. Gulp a également tendance à s’exécuter plus rapidement.

Passons maintenant à la suite et découvrons comment configurer un flux de travail avec Gulp.

Ce que nous mettons en place

À la fin de cet article, vous aurez un workflow qui effectue les tâches que nous avons décrites au début de cet article :

  • Démarre un serveur web
  • Compile Sass en CSS
  • Rafraîchit le navigateur automatiquement chaque fois que vous enregistrez un fichier
  • Optimise tous les actifs (CSS, JS, polices et images) pour la production

Vous apprendrez également comment enchaîner différentes tâches dans des commandes simples qui sont faciles à comprendre et à exécuter.

Commençons par installer Gulp sur votre ordinateur.

Installation de Gulp

Vous devez avoir Node.js (Node) installé sur votre ordinateur avant de pouvoir installer Gulp.

Si vous n’avez pas déjà installé Node, vous pouvez l’obtenir en téléchargeant l’installateur de paquets sur le site web de Node.

Quand vous avez fini d’installer Node, vous pouvez installer Gulp en utilisant la commande suivante dans la ligne de commande : 

$ sudo npm install gulp -g

Note : seuls les utilisateurs de Mac ont besoin du mot-clé sudo. (Voir le premier commentaire de Pawel Grzybek si vous ne voulez pas utiliser sudo). Et rappelez-vous que le « $ » dans le code ci-dessus symbolise simplement l’invite de commande. Cela ne fait pas réellement partie de la commande que vous exécutez.

La commande npm install que nous avons utilisée ici est une commande qui utilise Node Package Manager (npm) pour installer Gulp sur votre ordinateur.

Le drapeau -g de cette commande indique à npm d’installer Gulp globalement sur votre ordinateur, ce qui vous permet d’utiliser la commande gulp n’importe où sur votre système.

Les utilisateurs de Mac ont besoin du mot-clé supplémentaire sudo dans la commande car ils ont besoin de droits d’administrateur pour installer Gulp globalement.

Maintenant que vous avez installé Gulp, faisons un projet qui utilise Gulp.

Création d’un projet Gulp

D’abord, nous allons créer un dossier appelé project pour le serveur comme racine de notre projet au fur et à mesure que nous avançons dans ce tutoriel. Exécutez la commande npm init à l’intérieur de ce répertoire :

# ... from within our project folder$ npm init

La commande npm init crée un fichier package.json pour votre projet qui stocke des informations sur le projet, comme les dépendances utilisées dans le projet (Gulp est un exemple de dépendance).

npm init vous invitera :

Une fois le fichier package.json créé, nous pouvons installer Gulp dans le projet en utilisant la commande suivante : 

$ npm install gulp --save-dev

Cette fois, nous installons Gulp dans project au lieu de l’installer globalement, c’est pourquoi il y a quelques différences dans la commande.

Vous verrez que le mot clé sudo n’est pas nécessaire parce que nous n’installons pas Gulp globalement, donc -g n’est pas non plus nécessaire. Nous avons ajouté --save-dev, qui indique à l’ordinateur d’ajouter gulp comme dépendance de dev dans package.json.

Si vous vérifiez le dossier du projet lorsque la commande a fini de s’exécuter, vous devriez voir que Gulp a créé un dossier node_modules. Vous devriez également voir un dossier gulp à l’intérieur de node_modules.

Nous sommes presque prêts à commencer à travailler avec Gulp. Avant de le faire, nous devons être clairs sur la façon dont nous allons utiliser Gulp pour le projet, et une partie de cela consiste à décider d’une structure de répertoire.

Détermination de la structure de dossier

Gulp est assez flexible pour fonctionner avec n’importe quelle structure de dossier. Vous devrez juste comprendre les rouages internes avant de le peaufiner pour votre projet.

Pour cet article, nous allons utiliser la structure d’une webapp générique : 

 |- app/ |- css/ |- fonts/ |- images/ |- index.html |- js/ |- scss/ |- dist/ |- gulpfile.js |- node_modules/ |- package.json

Dans cette structure, nous utiliserons le dossier app à des fins de développement, tandis que le dossier dist (comme dans « distribution ») est utilisé pour contenir les fichiers optimisés pour le site de production.

Puisque app est utilisé à des fins de développement, tout notre code sera placé dans app.

Nous devrons garder cette structure de dossiers à l’esprit lorsque nous travaillerons sur nos configurations Gulp. Maintenant, commençons par créer votre première tâche Gulp dans gulpfile.js, qui stocke toutes les configurations Gulp.

Écrire votre première tâche Gulp

La première étape pour utiliser Gulp est de le requiredans le gulpfile. 

var gulp = require('gulp');

L’instruction require indique à Node de chercher dans le dossier node_modules un paquet nommé gulp. Une fois le paquet trouvé, nous assignons son contenu à la variable gulp.

Nous pouvons maintenant commencer à écrire une tâche gulp avec cette variable gulp. La syntaxe de base d’une tâche gulp est:

gulp.task('task-name', function() { // Stuff here});

task-name fait référence au nom de la tâche, qui serait utilisé chaque fois que vous voulez exécuter une tâche dans Gulp. Vous pouvez également exécuter la même tâche dans la ligne de commande en écrivant gulp task-name.

Pour le tester, créons une tâche hello qui dit Hello Zell!. 

gulp.task('hello', function() { console.log('Hello Zell');});

Nous pouvons exécuter cette tâche avec gulp hello dans la ligne de commande. 

$ gulp hello

La ligne de commande retournera un journal qui dit Hello Zell!.

Les tâches Gulp sont généralement un peu plus complexes que cela. Elle contient généralement deux méthodes Gulp supplémentaires, plus une variété de plugins Gulp.

Voici à quoi peut ressembler une vraie tâche :

Comme vous pouvez le voir, une tâche réelle prend en compte deux méthodes gulp supplémentaires – gulp.src et gulp.dest.

gulp.src indique à la tâche Gulp quels fichiers utiliser pour la tâche, tandis que gulp.dest indique à Gulp où sortir les fichiers une fois la tâche terminée.

Essayons de construire une tâche réelle où nous compilons des fichiers Sass en fichiers CSS.

Prétraitement avec Gulp

Nous pouvons compiler Sass en CSS dans Gulp avec l’aide d’un plugin appelé gulp-sass. Vous pouvez installer gulp-sass dans votre projet en utilisant la commande npm install comme nous l’avons fait pour gulp.

Nous voudrions également utiliser le drapeau --save-dev pour nous assurer que gulp-sass est ajouté à devDependencies dans package.json. 

$ npm install gulp-sass --save-dev

Nous devons requiregulp-sass à partir du dossier node_modules tout comme nous l’avons fait avec gulp avant de pouvoir utiliser le plugin. 

var gulp = require('gulp');// Requires the gulp-sass pluginvar sass = require('gulp-sass');

Nous pouvons utiliser gulp-sass en remplaçant aGulpPlugin() par sass(). Puisque la tâche est destinée à compiler Sass en CSS, nommons-la sass. 

gulp.task('sass', function(){ return gulp.src('source-files') .pipe(sass()) // Using gulp-sass .pipe(gulp.dest('destination'))});

Nous devrons fournir à la tâche sass des fichiers sources et une destination pour que la tâche fonctionne, alors créons un fichier styles.scss dans le dossier app/scss. Ce fichier sera ajouté à la tâche sass dans gulp.src.

Nous voulons sortir l’éventuel fichier styles.css dans le dossier `app/css`, qui serait le destination pour gulp.dest.

Nous voudrons tester que la tâche sass fonctionne comme nous le voulons. Pour ce faire, nous pouvons ajouter une fonction Sass au sein de styles.scss. 

// styles.scss.testing { width: percentage(5/7);}

Si vous exécutez gulp sass en ligne de commande, vous devriez maintenant être en mesure de voir qu’un fichier styles.css a été créé dans app/css. En outre, il a le code où percentage(5/7) a été évalué en 71.42857%. 

/* styles.css */.testing { width: 71.42857%; }

C’est ainsi que nous savons que la tâche sass fonctionne !

Parfois, nous avons besoin de la possibilité de compiler plus d’un fichier .scss en CSS en même temps. Nous pouvons le faire avec l’aide de Node globs.

FYI : Gulp-sass utilise LibSass pour convertir Sass en CSS. C’est beaucoup plus rapide que les méthodes basées sur Ruby. Si vous voulez, vous pouvez toujours utiliser les méthodes Ruby avec Gulp en utilisant gulp-ruby-sass ou gulp-compass à la place.

Globbing dans Node

Les globes sont des motifs de correspondance pour les fichiers qui vous permettent d’ajouter plus d’un fichier dans gulp.src. C’est comme les expressions régulières, mais spécifiquement pour les chemins de fichiers.

Lorsque vous utilisez un glob, l’ordinateur vérifie les noms et les chemins de fichiers pour le motif spécifié. Si le motif existe, alors un fichier est mis en correspondance.

La plupart des flux de travail avec Gulp ont tendance à ne nécessiter que 4 motifs de globbing différents :

  1. *.scss : Le motif * est un joker qui correspond à tout motif dans le répertoire actuel. Dans ce cas, nous faisons correspondre tous les fichiers se terminant par .scss dans le dossier racine (project).
  2. **/*.scss : Il s’agit d’une version plus extrême du motif * qui fait correspondre tout fichier se terminant par .scss dans le dossier racine et tous les répertoires enfants.
  3. !not-me.scss : Le ! indique que Gulp doit exclure le motif de ses correspondances, ce qui est utile si vous deviez exclure un fichier d’un motif correspondant. Dans ce cas, not-me.scss serait exclu de la correspondance.
  4. *.+(scss|sass) : Le plus + et les parenthèses () permettent à Gulp de faire correspondre plusieurs motifs, les différents motifs étant séparés par le caractère pipe |. Dans ce cas, Gulp fera correspondre tout fichier se terminant par .scss ou .sass dans le dossier racine.

Tout autre fichier Sass qui se trouve dans app/scss serait automatiquement inclus dans la tâche sass avec ce changement. Si vous ajoutez un fichier print.scss dans le projet, vous verrez que print.css sera généré dans app/css.

Nous avons maintenant réussi à compiler tous les fichiers Sass en fichiers CSS avec une seule commande. La question est de savoir à quoi cela sert si nous devons exécuter gulp sass manuellement chaque fois que nous voulons compiler Sass en CSS.

Heureusement, nous pouvons dire à Gulp d’exécuter automatiquement la tâche sass chaque fois qu’un fichier est enregistré par un processus appelé « watching ».

Surveiller les fichiers Sass pour les changements

Note ! Gulp Watch est l’une des choses qui a beaucoup changé de 3.x à 4.x. Voir la docs.

Gulp nous fournit une méthode watch qui vérifie si un fichier a été enregistré. La syntaxe de la méthode watch est : 

// Gulp watch syntaxgulp.watch('app/scss/**/*.scss', );

Plus souvent cependant, nous voudrons regarder plus d’un type de fichier à la fois. Pour ce faire, nous pouvons regrouper plusieurs processus de surveillance dans une tâche watch : 

gulp.task('watch', function(){ gulp.watch('app/scss/**/*.scss', ); // Other watchers})

Si vous exécutez la commande gulp watch maintenant, vous verrez que Gulp commence à regarder immédiatement.

Et qu’il exécute automatiquement la tâche sass chaque fois que vous enregistrez un fichier .scss.

Faisons un pas de plus et faisons en sorte que Gulp recharge le navigateur chaque fois que nous enregistrons un fichier .scss avec l’aide de Browser Sync.

Live-reloading with Browser Sync

Browser Sync aide à faciliter le développement web en faisant tourner un serveur web qui nous aide à faire du live-reloading facilement. Il a d’autres fonctionnalités, comme la synchronisation des actions sur plusieurs appareils, aussi bien.

Nous devrons d’abord installer Browser Sync : 

$ npm install browser-sync --save-dev

Vous avez peut-être remarqué qu’il n’y a pas de préfixe gulp- lorsque nous installons Browser Sync. C’est parce que Browser Sync fonctionne avec Gulp, donc nous n’avons pas besoin d’utiliser un plugin.

Pour utiliser Browser Sync, nous devrons require Browser Sync.

var browserSync = require('browser-sync').create();

Nous devons créer une tâche browserSync pour permettre à Gulp de faire tourner un serveur en utilisant Browser Sync. Puisque nous faisons tourner un serveur, nous devons indiquer à Browser Sync où doit se trouver la racine du serveur. Dans notre cas, c’est le dossier `app`:

gulp.task('browserSync', function() { browserSync.init({ server: { baseDir: 'app' }, })})

Nous devons également modifier légèrement notre tâche sass pour que Browser Sync puisse injecter de nouveaux styles CSS (mettre à jour le CSS) dans le navigateur chaque fois que la tâche sass est exécutée.

Nous avons terminé la configuration de Browser Sync. Maintenant, nous devons exécuter les deux tâches watch et browserSync en même temps pour que le rechargement en direct se produise.

Il sera encombrant d’ouvrir deux fenêtres de ligne de commande et d’exécuter gulp browserSync et gulp watch séparément, alors faisons en sorte que Gulp les exécute ensemble en indiquant à la tâche watch que browserSync doit être terminée avant que watch ne soit autorisée à s’exécuter.

Nous pouvons le faire en ajoutant un deuxième argument à la tâche watch. La syntaxe est la suivante : 

gulp.task('watch', , function (){ // ...})

Et dans ce cas, nous ajoutons la tâche browserSync. 

gulp.task('watch', , function (){ gulp.watch('app/scss/**/*.scss', ); // Other watchers})

Nous voudrons également nous assurer que sass s’exécute avant watch afin que le CSS soit déjà le plus récent chaque fois que nous lançons une commande Gulp. 

gulp.task('watch', , function (){ gulp.watch('app/scss/**/*.scss', ); // Other watchers});

Maintenant, si vous exécutez gulp watch dans la ligne de commande, Gulp devrait lancer les deux tâches sass et browserSync simultanément. Lorsque les deux tâches seront terminées, watch s’exécutera.

Au même moment, une fenêtre de navigateur qui pointe vers app/index.html apparaîtra également. Si vous modifiez le fichier styles.scss, vous verrez que le navigateur se recharge automatiquement.

Il y a encore une chose avant de terminer cette section sur le rechargement en direct. Puisque nous surveillons déjà le rechargement des fichiers .scss, pourquoi ne pas aller plus loin et recharger le navigateur si un fichier HTML ou JavaScript est enregistré ?

Nous pouvons le faire en ajoutant deux processus de veille supplémentaires, et en appelant la fonction browserSync.reload lorsqu’un fichier est sauvegardé :

Jusqu’ici, dans ce tutoriel, nous avons pris soin de trois choses :

  1. Démarrer un serveur web pour le développement
  2. Utiliser le préprocesseur Sass
  3. Relancer le navigateur chaque fois qu’un fichier est enregistré

Couvrons la partie sur l’optimisation des actifs dans la prochaine section. Nous allons commencer par l’optimisation des fichiers CSS et JavaScript.

Optimisation des fichiers CSS et JavaScript

Les développeurs ont deux tâches à effectuer lorsque nous essayons d’optimiser les fichiers CSS et JavaScript pour la production : la minification et la concaténation.

Un problème auquel les développeurs sont confrontés lorsqu’ils automatisent ce processus est qu’il est difficile de concaténer vos scripts dans le bon ordre.

Disons que nous avons inclus 3 balises de script dans index.html.

Ces scripts sont situés dans deux répertoires différents. Il sera difficile de les concaténer avec des plugins traditionnels comme gulp-concatenate.

Heureusement, il y a un plugin Gulp utile, gulp-useref qui résout ce problème.

Gulp-useref concatène un nombre quelconque de fichiers CSS et JavaScript en un seul fichier en recherchant un commentaire qui commence par « <!-build : » et se termine par « <!-endbuild-> ». Sa syntaxe est la suivante : 

<!-- build:<type> <path> -->... HTML Markup, list of script / link tags.<!-- endbuild -->

<type> peut être soit js, soit css, soit remove. Il est préférable de définir type au type de fichier que vous essayez de concaténer. Si vous définissez type à remove, Gulp supprimera le bloc de construction entier sans générer de fichier.

<path> fait ici référence au chemin cible du fichier généré.

Nous voudrons que le fichier JavaScript final soit généré dans le dossier js, comme main.min.js. Par conséquent, le balisage serait :

Maintenant, configurons le plugin gulp-useref dans le gulpfile. Nous devrons installer le plugin et le requérir dans le gulpfile.

$ npm install gulp-useref --save-dev
var useref = require('gulp-useref');

La configuration de la tâche useref est similaire aux autres tâches que nous avons effectuées jusqu’à présent. Voici le code : 

gulp.task('useref', function(){ return gulp.src('app/*.html') .pipe(useref()) .pipe(gulp.dest('dist'))});

Maintenant, si vous exécutez cette tâche useref, Gulp prendra en charge les 3 balises de script et les concaténera en dist/js/main.min.js.

Le fichier cependant, n’est pas minifié pour le moment. Nous devrons utiliser le plugin gulp-uglify pour aider à minifier les fichiers JavaScript. Nous avons également besoin d’un deuxième plugin appelé gulp-if pour s’assurer que nous tentons uniquement de minifier les fichiers JavaScript. 

$ npm install gulp-uglify --save-dev

Gulp devrait maintenant minifier automatiquement le fichier `main.min.js` chaque fois que vous exécutez la tâche useref.

Une chose soignée que je dois encore révéler avec Gulp-useref est qu’il change automatiquement tous les scripts dans « <!-build : » et « <!-endbuild-> » en un seul fichier JavaScript qui pointe vers `js/main.min.js`.

Merveilleux, n’est-ce pas ?

Nous pouvons utiliser la même méthode pour concaténer tout fichier CSS (si vous avez décidé d’en ajouter plusieurs) également. Nous allons suivre le même processus et ajouter un commentaire build.

Nous pouvons également minifier le fichier CSS concaténé. Nous devons utiliser un paquet appelé gulp-cssnano plugin pour nous aider avec la minification.

$ npm install gulp-cssnano

Maintenant, vous auriez un fichier CSS optimisé et un fichier JavaScript optimisé chaque fois que vous exécutez la tâche useref.

Passons à autre chose et optimisons les images ensuite.

Optimisation des images

Vous l’avez probablement deviné maintenant ; nous devons utiliser gulp-imagemin pour nous aider à optimiser les images.

$ npm install gulp-imagemin --save-dev
var imagemin = require('gulp-imagemin');

Nous pouvons minifier png, jpg, gif et même svg avec l’aide de gulp-imagemin. Créons une tâche images pour ce processus d’optimisation. 

gulp.task('images', function(){ return gulp.src('app/images/**/*.+(png|jpg|gif|svg)') .pipe(imagemin()) .pipe(gulp.dest('dist/images'))});

Puisque différents types de fichiers peuvent être optimisés différemment, vous pourriez vouloir ajouter des options à imagemin pour personnaliser la façon dont chaque fichier est optimisé.

Par exemple, vous pouvez créer des GIF entrelacés en réglant la touche d’option interlaced sur true.

Vous pouvez également jouer avec d’autres options si vous le souhaitez.

L’optimisation des images est cependant un processus extrêmement lent que vous ne voudriez pas répéter sauf si nécessaire. Pour ce faire, nous pouvons utiliser le plugin gulp-cache.

$ npm install gulp-cache --save-dev

Nous avons presque terminé avec le processus d’optimisation. Il y a encore un dossier que nous devons transférer du répertoire `app` dans `dist`, le répertoire des polices. Faisons cela maintenant.

Copier les polices dans Dist

Puisque les fichiers de polices sont déjà optimisés, il n’y a plus rien à faire. Tout ce que nous avons à faire est de copier les polices dans dist.

Nous pouvons copier des fichiers avec Gulp simplement en spécifiant les gulp.src et gulp.dest sans aucun plugin.

gulp.task('fonts', function() { return gulp.src('app/fonts/**/*') .pipe(gulp.dest('dist/fonts'))})

Maintenant, Gulp copiera `fonts` de `app` à `dist` chaque fois que vous exécutez gulp fonts.

Nous avons 6 tâches différentes dans le gulpfile maintenant, et chacune d’entre elles doit être appelée individuellement avec la ligne de commande, ce qui est un peu lourd, donc nous voulons tout lier en une seule commande.

Avant de faire cela cependant, regardons comment nettoyer les fichiers générés automatiquement.

Nettoyage des fichiers générés automatiquement

Puisque nous générons des fichiers automatiquement, nous voudrons nous assurer que les fichiers qui ne sont plus utilisés ne restent nulle part sans que nous le sachions.

Ce processus est appelé nettoyage (ou en termes plus simples, suppression de fichiers).

Nous devrons utiliser del pour nous aider à nettoyer. 

npm install del --save-dev
var del = require('del');

La fonction del prend dans un tableau de globs de nœuds qui lui indique les dossiers à supprimer.

La mettre en place avec une tâche Gulp est presque comme le premier exemple « hello » que nous avions. 

gulp.task('clean:dist', function() { return del.sync('dist');})

Maintenant, Gulp supprimera le dossier `dist` pour vous chaque fois que gulp clean:dist sera exécuté.

Note : Nous n’avons pas à nous soucier de la suppression du dossier dist/images car gulp-cache a déjà stocké les caches des images sur votre système local.

Pour effacer les caches de votre système local, vous pouvez créer une tâche séparée qui s’appelle `cache:clear`

gulp.task(‘cache:clear’, function (callback) {
return cache.clearAll(callback)
})

Phew, c’est une mise en bouche. Combinons toutes nos tâches ensemble maintenant !

Combinaison des tâches Gulp

Résumons ce que nous avons fait. Jusqu’à présent, nous avons créé deux ensembles distincts de tâches Gulp.

Le premier ensemble est destiné à un processus de développement, où nous avons compilé Sass en CSS, surveillé les changements, et rechargé le navigateur en conséquence.

Le deuxième ensemble est pour un processus d’optimisation, où nous préparons tous les fichiers pour le site de production. Nous avons optimisé les actifs comme le CSS, le JavaScript et les images dans ce processus et copié les polices de caractères de app à dist.

Nous avons déjà regroupé le premier ensemble de tâches dans un flux de travail simple avec la commande gulp watch : 

gulp.task('watch', , function (){ // ... watchers})

Le deuxième ensemble est constitué de tâches que nous devons exécuter pour créer le site web de production. Cela comprend clean:dist, sass, useref, images et fonts.

Si nous allions par le même train de pensée, nous pourrions créer une tâche build pour tout combiner ensemble. 

gulp.task('build', , function (){ console.log('Building files');})

Malheureusement, nous ne pourrions pas écrire la tâche build de cette façon parce que Gulp active toutes les tâches dans le deuxième argument simultanément.

Il y a une possibilité que useref, images, ou même fonts se termine avant clean, ce qui signifie que le dossier `dist` entier est supprimé.

Donc, pour s’assurer que les nettoyages se terminent avant le reste des tâches, nous devons utiliser un plugin supplémentaire appelé Run Sequence.

$ npm install run-sequence --save-dev

Voici la syntaxe d’une séquence de tâches avec run sequence :

Lorsque task-name est appelé, Gulp va exécuter task-one en premier. Lorsque task-one se termine, Gulp lancera automatiquement task-two. Enfin, lorsque task-two sera terminé, Gulp exécutera task-three.

La séquence d’exécution vous permet également d’exécuter des tâches simultanément si vous les placez dans un tableau : 

gulp.task('task-name', function(callback) { runSequence('task-one', , 'task-three', callback);});

Dans ce cas, Gulp exécute d’abord task-one. Lorsque task-one est terminée, Gulp exécute simultanément toutes les tâches du second argument. Toutes les tâches de ce deuxième argument doivent être terminées avant que task-three ne soit exécutée.

Nous pouvons donc maintenant créer une tâche qui garantit que clean:dist s’exécute en premier, suivie de toutes les autres tâches :

gulp.task('build', function (callback) { runSequence('clean:dist', , callback )})

Pour rendre les choses cohérentes, nous pouvons également construire la même séquence avec le premier groupe. Utilisons default comme nom de tâche cette fois-ci : 

gulp.task('default', function (callback) { runSequence(, callback )})

Pourquoi default ? Parce que lorsque vous avez une tâche nommée default, vous pouvez l’exécuter simplement en tapant la commande gulp, ce qui économise quelques frappes au clavier.

Enfin, voici un repo github pour tout le travail que nous avons fait !

Wrapping it up

Nous avons parcouru les bases absolues de Gulp et créé un flux de travail capable de compiler Sass en CSS tout en surveillant les fichiers HTML et JS pour les changements en même temps. Nous pouvons exécuter cette tâche avec la commande gulp dans la ligne de commande.

Nous avons également construit une deuxième tâche, build, qui crée un dossier dist pour le site web de production. Nous avons compilé Sass en CSS, optimisé tous nos actifs, et copié les dossiers nécessaires dans le dossier dist. Pour exécuter cette tâche, il nous suffit de taper gulp build dans la ligne de commande.

Enfin, nous avons une tâche clean qui efface du dossier dist généré tous les caches d’images qui sont créés, nous permettant de supprimer tous les anciens fichiers qui ont été conservés par inadvertance dans dist.

Nous avons créé un flux de travail robuste jusqu’à présent qui est assez capable pour la plupart des développeurs web. Il y a beaucoup plus à Gulp et aux flux de travail que nous pouvons explorer pour rendre ce processus encore meilleur. Voici quelques idées pour vous :

Pour le développement :

  • Utiliser Autoprefixer pour écrire du code CSS sans vendeur
  • Ajouter des Sourcemaps pour faciliter le débogage
  • Créer des Sprites avec sprity
  • Compiler uniquement les fichiers qui ont changé avec gulp-changed
  • Écrire ES6 avec Babel ou Traceur
  • Modulariser des fichiers Javascript avec Browserify, webpack, ou jspm
  • Modulariser du HTML avec des moteurs de templates comme Handlebars ou Swig
  • Séparer le fichier gulpfile en fichiers plus petits avec require-dir
  • Générer un script Modernizr automatiquement avec gulp-modernizr

Pour l’optimisation :

  • Suppression des CSS inutilisés avec unCSS
  • Poursuite de l’optimisation des CSS avec CSSO
  • Génération de CSS en ligne pour la performance avec Critical

En plus des processus de développement ou d’optimisation, vous pouvez également ajouter l’écriture de tests unitaires JavaScript avec gulp-jasmine et même déployer votre dossier dist sur votre serveur de production automatiquement avec gulp-rync.

Comme vous pouvez le voir, même si le flux de travail que nous avons créé fait pas mal de choses, il y a beaucoup plus qui peut être fait. Créer un flux de travail qui répond à vos besoins peut être extrêmement excitant et satisfaisant, mais cela peut être beaucoup à assimiler si vous êtes nouveau dans ce domaine.

Il y a tellement plus à Gulp qu’il est impossible de couvrir dans ce billet de blog, ou même dans une série de billets. C’est pourquoi j’ai écrit un livre sur l’automatisation de votre flux de travail, et je vous invite à saisir dix chapitres gratuitement si vous êtes intéressé à en savoir plus :).

Leave a Reply