Une introduction à Gulp.js –

Pour une introduction approfondie et de haute qualité à Node.js, vous ne pouvez pas dépasser Learn Node un cours du célèbre développeur canadien de rennes full stack Wes Bos. Utilisez le code SITEPOINT pour obtenir 25% de réduction!

Cet article était sponsorisé par New Relic . Il a été mis à jour pour refléter l'état actuel des plugins Gulp et Gulp. Merci de soutenir les sponsors qui rendent SitePoint possible!

Les développeurs passent un temps précieux à coder. Même si nous ignorons les réunions agaçantes, une grande partie du travail implique des tâches de base qui sapent votre journée de travail:

• générer du HTML à partir de modèles et de fichiers de contenu
• compresser des images nouvelles et modifiées
• suppression des instructions console et débogueur des scripts
• déplacement d'ES6 vers un code ES5 compatible cross-browser
• code linting et validation
• concaténation et minification de fichiers CSS et JavaScript [19659005] déployer des fichiers sur des serveurs de développement, de stockage intermédiaire et de production.

Les tâches doivent être répétées chaque fois que vous effectuez une modification. Vous pouvez commencer par de bonnes intentions, mais le développeur le plus infaillible oubliera de compresser une image ou deux. Au fil du temps, les tâches de pré-production deviennent de plus en plus ardues et chronophages; vous redouterez les changements inévitables de contenu et de modèle. C'est un travail répétitif et abrutissant. Ne serait-il pas mieux de passer votre temps à des travaux plus rentables?

Si oui, vous avez besoin d'un task runner ou build .

Ça semble compliqué!

La création d'un processus de génération prendra du temps. C'est plus complexe que d'effectuer chaque tâche manuellement, mais à long terme, vous économiserez des heures d'efforts, réduisez les erreurs humaines et sauvez votre santé mentale. Adoptez une approche pragmatique:

• Automatisez d'abord les tâches les plus frustrantes.
• Essayez de ne pas trop compliquer votre processus de construction. Une heure ou deux est plus que suffisant pour la configuration initiale.
• Choisissez un logiciel de coureur de tâches et respectez-le pendant un certain temps. Ne passez pas à une autre option sur un coup de tête

Certains outils et concepts peuvent être nouveaux pour vous, mais respirez profondément et concentrez-vous sur une chose à la fois.

Task Runners: the Options

] Des outils de construction tels que GNU Make sont disponibles depuis des décennies, mais les routeurs de tâches spécifiques au web sont un phénomène relativement nouveau. Le premier à atteindre la masse critique était Grunt – un runner de tâches Node.js qui utilisait des plugins contrôlés (à l'origine) par un fichier de configuration JSON. Grunt a été un énorme succès, mais il y avait un certain nombre de problèmes:

1. Grunt requis plugins pour les fonctionnalités de base telles que l'observation de fichiers.
2. Les greffons Grunt effectuaient souvent plusieurs tâches, ce qui rendait la personnalisation plus difficile.
3. Les tâches pouvaient s'exécuter lentement car Grunt sauvegardait les fichiers entre chaque étape de traitement

De nombreuses questions étaient abordées dans les éditions ultérieures, mais Gulp était déjà arrivé et offrait un nombre d'améliorations:

1. Des fonctions telles que l'observation de fichiers ont été intégrées.
2. Les plugins Gulp étaient (principalement) conçus pour faire un seul travail.
3. Gulp utilisait un code de configuration JavaScript moins verbeux
4. Gulp était plus rapide car il utilisait Node.js streams pour transmettre des données à travers une série de plugins. Les fichiers ont été écrits seulement à la fin de la tâche.

Bien sûr, Gulp lui-même n'est pas parfait, et de nouvelles tâches telles que Broccoli.js Brunch et ] webpack ont également été en concurrence pour l'attention des développeurs. Plus récemment, npm lui-même a été présenté comme une option plus simple . Tous ont leurs avantages et leurs inconvénients, mais Gulp reste le favori et est actuellement utilisé par plus de 40% des développeurs web .

Gulp nécessite Node.js, mais si certaines connaissances JavaScript sont bénéfiques, les développeurs de

Qu'en est-il de Gulp 4?

Ce tutoriel explique comment utiliser Gulp 3 – la version la plus récente au moment de l'écriture. Gulp 4 est en développement depuis un certain temps mais reste un produit bêta. Il est possible de utiliser ou passer à Gulp 4 mais je recommande de rester avec la version 3 jusqu'à la version finale.

Étape 1: Installer Node.js

Node.js peut être téléchargé pour Windows, macOS et Linux de nodejs.org/download/ . Il existe différentes options d'installation à partir des binaires, gestionnaires de paquets et images docker, et des instructions complètes sont disponibles

Note pour les utilisateurs Windows: Node.js et Gulp fonctionnent sous Windows, mais certains plugins ne peuvent pas être installés ou exécutés ils dépendent des binaires Linux natifs tels que les bibliothèques de compression d'image. Une option pour les utilisateurs de Windows 10 est la nouvelle ligne de commande bash qui résout de nombreux problèmes

Une fois installé, ouvrez une invite de commande et entrez:

 node -v

Ceci révèle le numéro de version. Vous êtes sur le point de faire un usage intensif de npm – le gestionnaire de paquets Node.js qui est utilisé pour installer les modules. Examiner son numéro de version:

 npm -v

Note pour les utilisateurs de Linux: Les modules Node.js peuvent être installés globalement de sorte qu'ils soient disponibles partout dans votre système. Cependant, la plupart des utilisateurs n'auront pas l'autorisation d'écrire dans les répertoires globaux à moins que les commandes npm ne soient préfixées par sudo . Il y a un certain nombre de options pour corriger les permissions npm et des outils comme nvm peuvent aider mais je change souvent le répertoire par défaut. Par exemple, sur les plateformes Ubuntu / Debian:

 cd ~
mkdir .node_modules_global
Préfixe du jeu de configuration npm = $ HOME / .node_modules_global
npm installer npm -g

Puis ajoutez la ligne suivante à la fin de ~ / .bashrc :

 export PATH = "$ HOME / .node_modules_global / bin: $ PATH"

Enfin, mettez à jour avec ceci:

 source ~ / .bashrc

Étape 2: Installation de Gulp Globally

Installez l'interface de ligne de commande Gulp globalement de sorte que la commande gulp puisse être exécutée depuis n'importe quel dossier de projet:

 npm install gulp-cli -g

Vérifiez que Gulp a installé avec ceci:

 gulp -v

Étape 3: Configurer votre projet

Note pour les projets Node.js: vous pouvez passer cette étape si vous avez déjà un fichier de configuration package.json .

Présumez que vous avez un projet nouveau ou préexistant dans le dossier project1 . Accédez à ce dossier et initialisez-le avec npm:

 cd project1
npm init

On vous posera une série de questions. Entrez une valeur ou appuyez sur . Retournez pour accepter les valeurs par défaut. Un fichier package.json sera créé à la fin et stockera vos paramètres de configuration npm

Note pour les utilisateurs de Git: Node.js installe les modules sur node_modules dossier. Vous devez ajouter cela à votre fichier .gitignore pour vous assurer qu'ils ne sont pas validés dans votre référentiel. Lorsque vous déployez le projet sur un autre PC, vous pouvez exécuter npm install pour les restaurer.

Pour le reste de cet article, nous supposons que votre dossier de projet contient les sous-dossiers suivants:

dossier src : fichiers source pré-traités

Cela contient d'autres sous-dossiers:

• html – Fichiers source et modèles HTML
• images – les images originales non compressées
• js – plusieurs fichiers de script prétraités
• scss – plusieurs fichiers Sass prétraités .scss

dossier build : fichiers compilés / traités

Gulp crée des fichiers et crée des sous-dossiers si nécessaire:

• html – statique compilé Fichiers HTML
• images – Images comprimées
• js – Un seul conc Fichier JavaScript reconstitué et minimisé
• css – un seul fichier CSS compilé et minifié

Votre projet sera certainement différent mais cette structure est utilisée pour les exemples ci-dessous.

: Si vous utilisez un système basé sur Unix et que vous voulez simplement suivre le tutoriel, vous pouvez recréer la structure du dossier avec la commande suivante:

 mkdir -p src / {html, images, js , scss} build / {html, images, js, css}

Étape 4: Installer localement Gulp

Vous pouvez maintenant installer Gulp dans votre dossier de projet en utilisant la commande:

 npm install gulp --save-dev

Cela installe Gulp en tant que dépendance de développement et la section "devDependencies" de package.json est mise à jour en conséquence. Nous supposerons que Gulp et tous les plugins sont des dépendances de développement pour le reste de ce tutoriel.

Options de déploiement alternatives

Les dépendances de développement ne sont pas installées lorsque la variable d'environnement NODE_ENV est définie sur production sur votre système d'exploitation. Vous le feriez normalement sur votre serveur en direct avec la commande Mac / Linux:

 export NODE_ENV = production

Ou sous Windows:

 set NODE_ENV = production

Ce didacticiel suppose que vos ressources seront compilées dans le dossier build et validées dans votre référentiel Git ou téléchargées directement sur le serveur. Toutefois, il peut être préférable de créer des ressources sur le serveur en direct si vous souhaitez modifier la façon dont elles sont créées. Par exemple, les fichiers HTML, CSS et JavaScript sont réduits en production mais pas en environnement de développement. Dans ce cas, utilisez l'option - save pour Gulp et tous les plugins, c'est-à-dire

 npm install gulp --save

Cela définit Gulp comme une dépendance d'application dans la section "dépendances" de package.json . Il sera installé lorsque vous entrez npm install et peut être exécuté à chaque fois que le projet est déployé. Vous pouvez supprimer le dossier build de votre référentiel car les fichiers peuvent être créés sur n'importe quelle plate-forme si nécessaire.

Étape 4: Créer un fichier de configuration Gulp

Créer un nouveau fichier gulpfile.js fichier de configuration à la racine de votre dossier de projet. Ajoutez du code de base pour commencer:

 // Configuration de Gulp.js
var
  // modules
  gulp = require ('gulp'),

  // Mode de développement?
  devBuild = (process.env.NODE_ENV! == 'production'),

  // Dossiers
  dossier = {
    src: 'src /',
    construire: 'build /'
  }
;

Cela fait référence au module Gulp, définit une variable devBuild sur true lors de l'exécution en développement (ou en mode non production) et définit les emplacements des sources et des dossiers de construction.

Note ES6: le code JavaScript compatible ES5 est fourni dans ce tutoriel. Cela fonctionnera pour toutes les versions de Gulp et Node.js avec ou sans le drapeau - harmony . La plupart des fonctionnalités ES6 sont supportées dans le nœud 6 et supérieur alors n'hésitez pas à utiliser les fonctions flèches, laissez const etc. si vous utilisez une version récente .

gulpfile.js ne fera rien pour l'instant …

Etape 5: Créer des tâches Gulp

Seul, Gulp ne fait rien. Vous devez:

1. installer les plugins Gulp, et
2. écrire des tâches qui utilisent ces plugins pour faire quelque chose d'utile.

Il est possible d'écrire vos propres plugins mais, comme près de 3000 sont disponibles, à. Vous pouvez effectuer une recherche en utilisant le répertoire de Gulp à gulpjs.com/plugins/ npmjs.com ou bien rechercher "gulp quelque chose " pour exploiter le puissant pouvoir de Google.

Gulp propose trois méthodes de tâches principales:

• gulp.task – définit une nouvelle tâche avec un nom, un tableau optionnel de dépendances et une fonction.
• gulp.src – Définit le dossier où se trouvent les fichiers sources
• gulp.dest – définit le dossier de destination où seront placés les fichiers de construction

Un nombre illimité d'appels de plugin est défini avec ] pipe entre les .src et .dest .

Image Tâche

Ceci est mieux démontré avec un exemple, alors créons une tâche de base qui compresse les images et les copie dans le dossier approprié build . Comme ce processus peut prendre du temps, nous ne compresserons que les fichiers nouveaux et modifiés. Deux plugins peuvent nous aider: gulp-newer et gulp-imagemin . Installez-les à partir de la ligne de commande:

 npm installez gulp-newer gulp-imagemin --save-dev

Nous pouvons maintenant référencer les deux modules en haut de gulpfile.js :

 // configuration de Gulp.js

var
  // modules
  gulp = require ('gulp'),
  newer = require ('gulp-newer'),
  imagemin = require ('gulp-imagemin'),

On peut maintenant définir la tâche de traitement d'image elle-même comme une fonction à la fin de gulpfile.js :

 // traitement d'image
gulp.task ('images', function () {
  var out = dossier.build + 'images /';
  return gulp.src (folder.src + 'images / ** / *')
    .pipe (plus récent (out))
    .pipe (imagemin ({optimizationLevel: 5}))
    .pipe (gulp.dest (out));
});

Toutes les tâches sont syntaxiquement similaires. Ce code:

1. Crée une nouvelle tâche nommée images .
2. Définit une fonction avec une valeur de retour qui …
3. Définit un dossier sur où les fichiers de construction seront situés .
4. Définit le dossier source Gulp src . Le / ** / * assure que les images dans les sous-dossiers sont également traitées.
5. Pipe tous les fichiers au module gulp-newer . Les fichiers sources plus récents que les fichiers de destination correspondants sont transmis. Tout le reste est supprimé
6. Les fichiers nouveaux ou modifiés restants sont redirigés via gulp-imagemin qui définit un argument facultatif optimizationLevel .
7. Les images compressées sont sorties vers la Gulp dest dossier défini par sorti .

Enregistrer gulpfile.js et placer quelques images dans le dossier src / images avant exécuter la tâche à partir de la ligne de commande:

 images gulp

Toutes les images sont compressées en conséquence et vous verrez une sortie telle que:

 Utiliser le fichier gulpfile.js
Courir 'imagemin' ...
Terminé 'imagemin' en 5.71 ms
gulp-imagemin: image1.png (enregistré 48.7 kB)
gulp-imagemin: image2.jpg (sauvegardé 36.2 kB)
gulp-imagemin: image3.svg (enregistré 12.8 kB)

Essayez d'exécuter à nouveau des images gulp et rien ne devrait arriver car aucune image plus récente n'existe

Tâche HTML

Nous pouvons maintenant créer une tâche similaire qui copie les fichiers du dossier HTML source. Nous pouvons minifier en toute sécurité notre code HTML pour supprimer les espaces et les attributs inutiles en utilisant le plugin gulp-htmlclean :

 npm installer gulp-htmlclean --save-dev

Ceci est alors référencé en haut de gulpfile.js :

 var
  // modules
  gulp = require ('gulp'),
  newer = require ('gulp-newer'),
  imagemin = require ('gulp-imagemin'),
  htmlclean = require ('gulp-htmlclean'),

Nous pouvons maintenant créer une tâche html à la fin de gulpfile.js :

 // Traitement HTML
gulp.task ('html', ['images']function () {
  var
    out = folder.build + 'html /',
    page = gulp.src (folder.src + 'html / ** / *')
      .pipe (plus récent (out));

  // Réduire le code de production
  if (! devBuild) {
    page = page.pipe (htmlclean ());
  }

  retourne page.pipe (gulp.dest (out));
});

Cela réutilise gulp-newer et introduit quelques concepts:

1. L'argument [images] indique que notre tâche images doit être exécutée avant de traiter le HTML (HTML est susceptible de référencer des images). N'importe quel nombre de tâches dépendantes peut être répertorié dans ce tableau et tout se terminera avant l'exécution de la tâche.
2. Nous ne redirigeons que le code HTML via gulp-htmlclean si NODE_ENV est défini sur production . Par conséquent, le code HTML reste décompressé pendant le développement, ce qui peut être utile pour le débogage.

Enregistrez gulpfile.js et exécutez gulp html à partir de la ligne de commande. Les tâches html et images seront exécutées

JavaScript Task

Trop facile pour vous? Traitons tous nos fichiers JavaScript en construisant un bundler de module de base. Il va:

1. S'assurer que les dépendances sont chargées en premier en utilisant le plugin gulp-deporder . Ceci analyse les commentaires en haut de chaque script pour assurer une commande correcte. Par exemple, // requiert: defaults.js lib.js .
2. Concaténer tous les fichiers de script en un seul fichier main.js en utilisant gulp-concat
3. Supprimer toutes les instructions console et débogage avec gulp-strip-debug et minimiser le code avec gulp-uglify . Cette étape ne se produira que lors de l'exécution en mode production.

Installer les plugins:

 npm installer gulp-deporder gulp-concat gulp-strip-debug gulp-uglify --save-dev

Les référence en haut de gulpfile.js :

 var
  ...
  concat = require ('gulp-concat'),
  deporder = require ('gulp-deporder'),
  stripdebug = require ('gulp-strip-debug'),
  uglify = require ('gulp-uglify'),

Puis ajoutez une nouvelle tâche js :

 // Traitement JavaScript
gulp.task ('js', function () {

  var jsbuild = gulp.src (folder.src + 'js / ** / *')
    .pipe (deporder ())
    .pipe (concat ('main.js'));

  if (! devBuild) {
    jsbuild = jsbuild
      .pipe (stripdebug ())
      .pipe (uglify ());
  }

  return jsbuild.pipe (gulp.dest (folder.build + 'js /'));

});

Enregistrez puis exécutez gulp js pour voir la magie se produire!

CSS Task

Enfin, créons une tâche CSS qui compile les fichiers Sass .scss en un seul .css fichier utilisant gulp-sass . Ceci est un plugin Gulp pour node-sass qui se lie au port LibSass C / C ++ super rapide du moteur Sass (vous n'aurez pas besoin d'installer Ruby) . Nous supposerons que votre fichier Sass principal scss / main.scss est responsable du chargement de tous les partials.

Notre tâche utilisera également le fabuleux PostCSS via le gulp- postcss plugin. PostCSS nécessite son propre jeu de plugins et nous allons les installer:

• postcss-assets pour gérer les assets. Cela nous permet d'utiliser des propriétés telles que background: resolve ('image.png'); pour résoudre les chemins de fichier ou background: inline ('image.png'); pour des données en ligne
• autoprefixer pour ajouter automatiquement les préfixes des fournisseurs aux propriétés CSS
• css-mqpacker pour regrouper plusieurs références à la même requête de média CSS en une seule règle.
• cssnano pour réduire le code CSS lors de l'exécution en mode production

Tout d'abord, installer tous les modules:

 npm installer gulp-sass gulp-postcss postcss-assets autoprefixer css-mqpacker cssnano --save-dev

Puis les référence en haut de gulpfile.js :

 var
  ...
  sass = require ('gulp-sass'),
  postcss = require ('gulp-postcss'),
  assets = require ('postcss-assets'),
  autoprefixer = require ('autoprefixer'),
  mqpacker = require ('css-mqpacker'),
  cssnano = require ('cssnano'),

Nous pouvons maintenant créer une nouvelle tâche css à la fin de gulpfile.js . Notez que la tâche images est définie comme dépendance car le plug-in postcss-assets peut référencer des images pendant le processus de construction. De plus, la plupart des plugins peuvent recevoir des arguments (voir leur documentation pour plus d'informations):

 // Traitement CSS
gulp.task ('css', ['images']function () {

  var postCssOpts = [
  assets({ loadPaths: ['images/']}),
  autoprefixer ({navigateurs: ['last 2 versions', '> 2%']}),
  mqpacker
  ]

  if (! devBuild) {
    postCssOpts.push (cssnano);
  }

  return gulp.src (folder.src + 'scss / main.scss')
    .pipe (sass ({
      outputStyle: 'imbriqué',
      imagePath: 'images /',
      précision: 3,
      errLogToConsole: true
    }))
    .pipe (postcss (postCssOpts))
    .pipe (gulp.dest (folder.build + 'css /'));

});

Enregistrez le fichier et exécutez la tâche à partir de la ligne de commande:

 gulp css

Étape 6: automatiser les tâches

Nous avons exécuté une tâche à la fois. Nous pouvons les exécuter tous en une commande en ajoutant une nouvelle tâche run à gulpfile.js :

 // exécuter toutes les tâches
gulp.task ('run', ['html', 'css', 'js']);

Enregistrez et entrez gulp run sur la ligne de commande pour exécuter toutes les tâches. Notez que j'ai omis la tâche images car elle est déjà définie comme dépendance pour les tâches html et css

Est-ce encore trop dur? Gulp propose une autre méthode – gulp.watch – qui peut surveiller vos fichiers sources et exécuter une tâche appropriée chaque fois qu'un fichier est modifié. La méthode passe un dossier et une liste de tâches à exécuter lorsqu'une modification se produit. Créons une nouvelle tâche watch à la fin de gulpfile.js :

 // surveille les changements
gulp.task ('watch', function () {

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

  // modifications html
  gulp.watch (folder.src + 'html / ** / *', ['html']);

  // modifications javascript
  gulp.watch (folder.src + 'js / ** / *', ['js']);

  // modifications CSS
  gulp.watch (folder.src + 'scss / ** / *', ['css']);

});

Plutôt que d'exécuter gulp watch immédiatement, ajoutons une tâche par défaut:

 // tâche par défaut
gulp.task ('default', ['run', 'watch']);

Sauvegardez gulpfile.js et entrez gulp sur la ligne de commande. Vos images, HTML, CSS et JavaScript seront tous traités, puis Gulp restera actif en regardant les mises à jour et en ré-exécutant les tâches si nécessaire. Hit Ctrl / Cmd + C pour annuler la surveillance et revenir à la ligne de commande.

Étape 7: Profit!

Autres plugins que vous pouvez trouver utiles:

One méthode utile dans gulp-util est .noop () qui passe les données directement sans effectuer aucune action. Cela pourrait être utilisé pour un code de traitement de développement / production plus propre. Par exemple:

 var gutil = require ('gulp-util');

// Traitement HTML
gulp.task ('html', ['images']function () {
  var out = dossier.src + 'html / ** / *';

  return gulp.src (folder.src + 'html / ** / *')
    .pipe (plus récent (out))
    .pipe (devBuild? gutil.noop (): htmlclean ())
    .pipe (gulp.dest (out));

});

Gulp peut également appeler d'autres modules Node.js, et ils n'ont pas nécessairement besoin d'être des plugins. Par exemple:

• browser-sync – recharger automatiquement les ressources ou actualiser votre navigateur lorsque des modifications surviennent
• del – supprimer des fichiers et des dossiers (peut-être nettoyer votre build dossier au début de chaque course).

Investir un peu de temps et Gulp pourrait sauver beaucoup d'heures de frustration de développement. Les avantages:

• les plugins sont abondants
• la configuration utilisant des tuyaux est lisible et facile à suivre
• gulpfile.js peut être adapté et réutilisé dans d'autres projets
• votre poids total de la page peut être réduit pour améliorer les performances
• vous pouvez simplifier votre déploiement.

Liens utiles:

L'application des processus ci-dessus à un simple site Web a réduit le poids total de plus de 50%. Vous pouvez tester vos propres résultats en utilisant outils d'analyse de poids de page ou un service tel que New Relic qui fournit une gamme d'outils sophistiqués de surveillance des performances applicatives.

Gulp peut révolutionner votre flux de travail . J'espère que vous avez trouvé ce tutoriel utile et considérez Gulp pour votre processus de production. Je serais heureux d'entendre vos pensées dans les commentaires ci-dessous.

Cet article a été révisé par Giulio Mainardi et Tim Severien . Merci à tous les pairs évaluateurs de SitePoint pour avoir rendu le contenu de SitePoint le meilleur possible!

Craig est un consultant Web indépendant au Royaume-Uni qui a créé sa première page pour IE2.0 en 1995. Depuis, il préconise les normes, l'accessibilité et meilleures techniques HTML5. Il a écrit plus de 1000 articles pour SitePoint et vous pouvez le trouver @craigbuckler