Comment migrer vers Gulp.js 4.0 –

Malgré la concurrence des webpack et des parcelles Gulp.js reste l’un des plus populaires utilisateurs de tâches JavaScript. Gulp.js est configuré à l'aide de code, ce qui en fait une option polyvalente et polyvalente. En plus des tâches habituelles de transpilation, de regroupement et de rechargement en direct, Gulp.js pourrait analyser une base de données, restituer un site statique, pousser un commit Git et publier un message Slack avec une seule commande.

Pour une introduction à Gulp, prenez Voici un aperçu de ce qui suit:

Gulp.js 4.0

Gulp.js 3.x est la valeur par défaut depuis environ une demi-décennie. Jusqu'à récemment, npm install gulp aurait installé la version 3.9.1 – la version référencée dans les tutoriels ci-dessus.

Gulp.js 4.0 a été disponible pendant tout ce temps, mais devait être explicitement installé avec . ] npm install gulp @ next . Cela s'explique en partie par le développement en cours et par le fait que les fichiers de configuration Gulp.js 4 gulpfile.js ne sont pas compatibles avec ceux développés pour la version 3.

Le 10 décembre 2018, Gulp.js 4.0 a été annoncé comme étant le format par défaut et publié dans npm . Quiconque utilisant npm install gulp sur un nouveau projet recevra la version 4.

Est-il nécessaire de migrer vers Gulp.js 4?

Non. Gulp.js 3 est obsolète et il est peu probable qu'il reçoive d'autres mises à jour, mais il peut toujours être utilisé. Les projets existants ne seront pas mis à jour à moins que la version ne soit explicitement modifiée dans la section des dépendances de package.json . Par exemple:

 "dépendances": {
  "gulp": "^ 4.0.0"
}

Vous pouvez également installer Gulp.js 3 dans de nouveaux projets en utilisant:

 npm install gulp@^3.9.1

Il est peut-être préférable de rester avec Gulp.js 3.x si vous avez un système de construction particulièrement complexe et critique.

Toutefois, les plugins Gulp.js existants doivent être compatibles et la plupart des gulpfile.js []. les configurations peuvent être migrées en une heure ou deux. La mise à niveau présente plusieurs avantages, qui apparaîtront tout au long de ce didacticiel.

Passez à Gulp.js 4.0

Mettez à jour vos dépendances package.json comme indiqué ci-dessus, puis exécutez npm install à améliorer. Vous pouvez également mettre à jour l'interface de ligne de commande à l'aide de npm i gulp-cli -g bien que cela n'ait pas changé au moment de la rédaction du présent document.

Pour vérifier l'installation, entrez gulp - v sur la ligne de commande:

 $ gulp -v
[15:15:04] CLI version 2.0.1
[15:15:04] Version locale 4.0.0

Migration de gulpfile.js

L'exécution de n'importe quelle tâche est maintenant susceptible de générer des erreurs inquiétantes. Par exemple:

 AssertionError [ERR_ASSERTION]: La fonction de tâche doit être spécifiée.
  at Gulp.set [as _setTask] (/node_modules/undertaker/lib/set-task.js:10:3)
  à Gulp.task (/node_modules/undertaker/lib/task.js:13:8)
  à /gulpfile.js:102:8
  à l'objet.  (/gulpfile.js:146:3)
  dans Module._compile (internal / modules / cjs / loader.js: 688: 30)
  sur Object.Module._extensions..js (internal / modules / cjs / loader.js: 699: 10)
  sur Module.load (internal / modules / cjs / loader.js: 598: 32)
  sur tryModuleLoad (internal / modules / cjs / loader.js: 537: 12)
  sur Function.Module._load (internal / modules / cjs / loader.js: 529: 3)
  sur Module.require (internal / modules / cjs / loader.js: 636: 17)
  at require (internal / modules / cjs / helpers.js: 20: 18)
  at execute (/gulp-cli/lib/versenced/^4.0.0/index.js:36:18)
  à Liftoff.handleArguments (/gulp-cli/index.js:175:63)
  à Liftoff.execute (/gulp-cli/node_modules/liftoff/index.js:203:12)
  sur module.exports (/gulp-cli/node_modules/flagged-respawn/index.js:51:3)
  au décollage.  (/gulp-cli/node_modules/liftoff/index.js:195:5)

C'est intimidant, mais vous pouvez tout ignorer à l'exception de la première référence de gulpfile.js qui indique la ligne où une erreur a été rencontrée (102 dans cet exemple).

Heureusement, la plupart d'entre eux les erreurs sont causées par le même type de problème. Les sections suivantes utilisent le code du tutoriel des tâches CSS comme exemple. Le code est disponible sur GitHub et fournit l'équivalent d'origine Gulp.js 3 gulpfile.js et le Migration Gulp.js 4 équivalente .

Convertir les tableaux de tâches. to series () Call

Gulp.js 3 permet de spécifier des tableaux de tâches synchrones. Cela était généralement utilisé lorsqu'un événement de montre était déclenché ou qu'une tâche avait des dépendances. Par exemple, exécutez la tâche images avant la tâche css :

 gulp.task ('css', ['images']() =>

  gulp.src (cssConfig.src)
    // .autres plugins
    .pipe (gulp.dest (cssConfig.build));

)

Gulp.js 4.0 introduit les séries () et parallel () méthodes permettant de combiner des tâches:

Des tâches complexes peuvent être imbriquées à n'importe quel niveau – ce qui aurait été le cas difficile à atteindre dans Gulp.js 3. Par exemple, exécutez les tâches a et b en parallèle, puis, une fois les deux opérations terminées, exécutez les tâches c et . ] d en parallèle:

 gulp.series (gulp.parallel (a, b), gulp.parallel (c, d))

La tâche css ci-dessus peut être migrée vers Gulp.js 4 en modifiant le tableau en méthode () :

 gulp.task ('css', gulp.series ('images', () =>

  gulp.src (cssConfig.src)
    // .autres plugins
    .pipe (gulp.dest (cssConfig.build));

)); // souviens-toi du crochet de fermeture supplémentaire!

Async Completion

Gulp.js 3 autorisait les fonctions synchrones, mais celles-ci risquaient de générer des erreurs difficiles à corriger. Considérez des tâches qui ne renvoient pas la valeur en continu de gulp . Par exemple, une tâche clean pour supprimer le dossier build :

 const.
  gulp = require ('gulp'),
  del = require ('del'),
  dir = {
    src: 'src /',
    build: 'build /'
  };

gulp.task ('clean', () => {

  del ([ dir.build ]);

});

Gulp.js 4.0 lance un avertissement car il doit savoir quand une tâche est terminée pour gérer les séries () et parallèles () :

 [15:57:27] Utilisation de gulpfile gulpfile.js
[15:57:27] Partir 'propre' ...
[15:57:27] Les tâches suivantes n'ont pas abouti: nettoyer.
[15:57:27] Avez-vous oublié de signaler l'achèvement asynchrone?

Pour résoudre ce problème, Gulp.js 4 acceptera une promesse retournée (appuyée par le paquet del ) :

 gulp.task ('clean ', () => {

  return del ([ dir.build ]);

});

// ou utilisez le retour implicite plus simple:
// gulp.task ('clean', () => del ([ dir.build ]));

Sinon, transmettez une fonction de rappel exécutée à l'achèvement ( del fournit également une méthode synchrone sync () ) :

 gulp.task ('clean', (done) => {

  del.sync ([ dir.build ]);
  terminé();

});

Voici un exemple plus complexe de Gulp.js 3 avec des tâches de surveillance:

 gulp.task ('default', ['css', 'server']() => {

  // changements d'image
  gulp.watch (imgConfig.src, ['images']);

  // changements de CSS
  gulp.watch (cssConfig.watch, ['css']);

});

Elles peuvent être migrées vers des méthodes Gulp.js 4 series () et un done () callback:

 gulp.task ('default', gulp.series ( 'css', 'serveur', (done) => {

  // changements d'image
  gulp.watch (imgConfig.src, gulp.series ("images"));

  // changements de CSS
  gulp.watch (cssConfig.watch, gulp.series ('css'));

  terminé();

}));

Astuce complémentaire: conversion des méthodes de tâche en modules ES6

La plupart des configurations de gulpfile.js fonctionnent dans Gulp.js 4.0 une fois les tableaux de tâches convertis en séries () et les fonctions asynchrones signalent l'achèvement.

Bien que la méthode de définition de tâche () soit toujours prise en charge, le modèle plus récent du module ES6 exports offre plusieurs avantages:

1. Les tâches privées peuvent être définies. peut être appelé dans gulpfile.js mais pas à partir de la commande gulp .
2. Les fonctions peuvent être passées par référence plutôt que par un nom de chaîne afin que les erreurs de syntaxe puissent être mises en évidence par les éditeurs. 19659049] La même fonction peut être référencée à l'aide de plusieurs noms de tâches
3. Il est plus facile de définir des dépendances complexes dans les séries () et / ou parallel () .

Prenez les images suivantes Gulp.js 3 et css : [19659009] gulp.task ('images', () =>

  gulp.src (imgConfig.src)
    // .autres plugins
    .pipe (gulp.dest (imgConfig.build))

)

gulp.task ('css', [‘images’]() =>

  gulp.src (cssConfig.src)
    // .autres plugins
    .pipe (gulp.dest (cssConfig.build))

)

Celles-ci pourraient être converties pour utiliser le modèle de module Gulp.js 4:

 function images () {

  return gulp.src (imgConfig.src)
    // .autres plugins
    .pipe (gulp.dest (imgConfig.build));

}
exports.images = images;
exports.pics = images;


fonction css () {

  renvoyer gulp.src (cssConfig.src)
    // .autres plugins
    .pipe (gulp.dest (cssConfig.build));

}
exports.css = gulp.series (images, css);
exports.styles = exports.css;

Note: Les déclarations return doivent être ajoutées car les flèches ES6 => ont été modifiées en définitions de fonctions standard.

Dans cet exemple Gulp.js 4:

• des images gulp ou des images gulp peuvent être utilisées pour exécuter la tâche images ()
• gulp css ou les styles gulp seront exécutés images () suivis de css () .

Ensemble exports.default pour définir une tâche par défaut exécutée lorsque gulp est exécuté à partir de la ligne de commande sans tâche spécifique.

Gulp Goodness

L'exemple de tâches CSS qui optimise les images, compile Sass, minimise les CSS, et recharge en direct sur les modifications, a pris moins d’une heure pour convertir. Examinez le code sur GitHub pour voir:

Il a fallu un certain temps pour arriver (correctement), mais Gulp.js 4 offre la possibilité de définir des tâches qui auraient été peu pratiques dans la version 3. La mise à jour du logiciel peut sembler C'est un gaspillage d'efforts de développement, mais vous serez récompensé par un ensemble de tâches plus rapides et plus robustes, qui vous feront gagner du temps à long terme.

Craig est un consultant web britannique indépendant qui a construit sa première page pour IE2. 0 en 1995. Depuis ce temps, il préconise les normes, l'accessibilité et les meilleures techniques HTML5. Il a créé des spécifications d'entreprise, des sites Web et des applications en ligne pour des entreprises et organisations telles que le Parlement britannique, le Parlement européen, le Département de l'énergie et des changements climatiques, Microsoft, etc. Il a écrit plus de 1 000 articles pour SitePoint et vous le trouverez @craigbuckler .