Une introduction à Gulp.js –

mai 13, 2019

Cet article a été sponsorisé par New Relic . Il a été mis à jour en avril 2019 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 irritantes, une grande partie du travail implique des tâches élémentaires qui peuvent nuire à 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
compiler Sass en code CSS
suppression des instructions des consoles et du débogueur des scripts
transpilant ES6 en code ES5 compatible avec plusieurs navigateurs
lissant et validant le code
concaténant et en minalisant les fichiers CSS et JavaScript [19659004] déploiement de fichiers sur des serveurs de développement, de transfert et de production

Les tâches doivent être répétées à chaque fois que vous effectuez une modification. Vous pouvez commencer avec 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 pénibles et prennent beaucoup de temps; vous craignez les changements de contenu et de modèle inévitables. C’est un travail ahurissant et répétitif.

Si oui, vous avez besoin d'un porteur de tâche ou d'un processus de construction .

Cela semble vraiment compliqué!

] Créer un processus de construction prendra du temps. C’est plus complexe que d’effectuer chaque tâche manuellement, mais à long terme, vous économiserez des heures d’effort, réduirez les erreurs humaines et préserverez votre santé mentale. Adoptez une approche pragmatique:

Commencez par automatiser 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 le logiciel de gestion des tâches et conservez-le pendant un moment. Ne passez pas à une autre option sur un coup de tête.

Certains outils et concepts peuvent vous être nouveaux, mais prenez une profonde respiration et concentrez-vous sur une chose à la fois.

Task Runners: the Options [19659014] Des outils tels que GNU Make sont disponibles depuis des décennies, mais les tâches spécifiques à Internet sont un phénomène relativement récent. Le premier à atteindre une masse critique était Grunt – un programme d'exécution de tâches Node.js utilisant des plug-ins configurés (à l'origine) par un fichier de configuration JSON. Grunt a eu un énorme succès, mais a souffert de problèmes de vitesse et de personnalisation complexes. De nombreuses questions ont été abordées dans les éditions ultérieures, mais Gulp était déjà arrivé et offrait un certain nombre d'améliorations:

Des fonctionnalités telles que l'observation de fichiers étaient intégrées.

Les plugins Gulp étaient (principalement ) simple et conçu pour un seul travail

Gulp utilisait un code de configuration JavaScript moins bavard, plus facile à lire, à modifier, et offrant une plus grande flexibilité.

Gulp était plus rapide car il utilisait . ] Node.js diffuse pour transmettre des données via une série de plug-ins canalisés. Les fichiers n'étaient écrits qu'à la fin de chaque tâche.

Depuis lors, plusieurs alternatives concurrentes sont arrivées:

Cependant, Gulp fournit toujours la souplesse et l'efficacité pour attirer un tiers des développeurs Web . Si vous parvenez à écrire du JavaScript, Gulp autorise toutes les tâches générales.

Gulp requiert Node.js. La connaissance de JavaScript est utile, mais les développeurs de toutes les religions du Web le trouveront utile.

Versions de Gulp

Gulp.js 3.9.1 est la version par défaut depuis de nombreuses années et, bien que Gulp 4 soit disponible, il devait être explicitement disponible. installé avec npm install gulp @ next . Cela était nécessaire car, bien que les plugins restent compatibles, Gulp 4 utilisait une nouvelle syntaxe de configuration.

Le 10 décembre 2018, Gulp.js 4.0 était annoncé comme étant la valeur par défaut et était publié vers npm. Toute personne utilisant npm install gulp sur un nouveau projet recevra la version 4. Elle sera utilisée tout au long de ce guide.

Étape 1: Installez Node.js

Node.js peut être téléchargé pour Windows, macOS et Linux de nodejs.org/download/ . Il existe diverses options d’installation à partir de fichiers binaires, de gestionnaires de packages et d’images de menu fixe. des instructions complètes sont disponibles.

Remarque: Node.js et Gulp s'exécutent sous Windows, mais certains plug-in risquent de ne pas fonctionner correctement s'ils dépendent de binaires Linux natifs. Une option pour les utilisateurs de Windows 10 est le sous-système Windows pour Linux ; cela peut résoudre des problèmes, mais peut présenter d'autres problèmes.

Une fois installé, ouvrez une invite de commande et entrez ce qui suit pour afficher le numéro de version:

 node -v

Vous êtes sur le point de faire un usage intensif de npm – le gestionnaire de paquets Node.js qui installait les modules. Examinez son numéro de version:

 npm -v

Remarque: les modules Node.js peuvent être installés de manière globale afin qu'ils soient disponibles dans tout votre système. Cependant, la plupart des utilisateurs ne seront pas autorisés à écrire dans les répertoires globaux sauf si les commandes npm sont précédées du préfixe sudo . Il existe un certain nombre d'options pour corriger les autorisations npm et des outils tels que nvm peuvent aider mais vous pouvez également modifier le répertoire par défaut, par exemple. sur les plateformes Ubuntu / Debian:

 cd ~
  mkdir .node_modules_global
  préfixe de l'ensemble de configuration npm = $ HOME / .node_modules_global
  npm install npm -g

Ajoutez ensuite la ligne suivante à la fin de ~ / .bashrc :

export PATH = "$ HOME / .node_modules_global / bin: $ PATH" [19659036] Mettez à jour vos données avec ceci: source ~ / .bashrc Étape 2: Installation globale de Gulp Installez l'interface de ligne de commande Gulp globalement pour que la commande gulp puisse être lancer depuis n'importe quel dossier de projet: npm install gulp-cli -g Vérifiez que Gulp a installé les éléments suivants: gulp -v Étape 3: Configurez votre projet Remarque: vous pouvez ignorer cette étape si vous avez déjà un fichier de configuration package.json . Supposons que vous avez un projet nouveau ou préexistant dans le dossier projet1 . Naviguez vers 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 Return pour accepter les valeurs par défaut. Un fichier package.json contenant vos paramètres de configuration npm sera créé à l'achèvement. Remarque: Node.js installe les modules dans un node_modules . ] dossier. Vous devez l'ajouter à votre fichier .gitignore pour vous assurer qu'ils ne sont pas engagés dans votre référentiel. Lors du déploiement du projet sur un autre système, vous pouvez exécuter npm install pour les restaurer. Pour le reste de ce guide, nous présumerons que votre dossier de projet contient les sous-dossiers détaillés ci-dessous. 19659056] src Dossier: Fichiers sources pré-traités

Contient d'autres sous-dossiers:

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

`build` Dossier: Fichiers compilés / traités

Gulp créera des fichiers et créera autant de sous-dossiers que nécessaire:

html - fichiers HTML statiques compilés
images - compressée images
js - un seul fichier JavaScript concaténé et minifié [19659004] css - un seul fichier CSS compilé et minisé

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

Remarque: Si vous êtes sur un système Unix et que vous souhaitez simplement suivre ce guide, vous pouvez recréer la structure du dossier source à l'aide de la commande suivante:

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

4: Installer Gulp localement

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

 npm install gulp --save-dev

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

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 . sur votre système d'exploitation. Vous feriez normalement cela sur votre serveur live avec la commande macOS / Linux:

 export NODE_ENV = production

Ou sous Windows:

 définissez NODE_ENV = production.

Ce guide suppose que vos ressources seront compilées dans le dossier build et archivé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 actifs sur le serveur live si vous souhaitez modifier la façon dont ils sont créés - par exemple, les fichiers HTML, CSS et JavaScript étant minifiés dans des environnements de production mais non de développement. Dans ce cas, supprimez le commutateur - save-dev lors de l'installation de Gulp et de ses plugins. Par exemple:

 npm install gulp

Gulp est défini comme une dépendance d'applications dans la section "dépendances" de package.json . Il sera installé lorsque vous entrez npm install et peut être exécuté partout où 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éation d’un fichier de configuration Gulp

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

 // Configuration de Gulp.js

const
  // modules
  gulp = require ('gulp'),

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

  // Dossiers
  src = "http://www.sitepoint.com/src/",
  build = 'build /'
  ;

Ceci fait référence au module Gulp, définit une variable devBuild sur true lors de l'exécution en mode de développement (ou en mode non productif) et définit les emplacements des dossiers source et de génération.

Remarque: le code ES6 est fourni dans ce guide. Cela fonctionnera dans Node.js à partir de la version 6.0 et ultérieure.

gulpfile.js ne fera rien pour le moment, car vous devez suivre la procédure décrite ci-dessous.

Étape 5: Créer des tâches Gulp

Seul, Gulp ne fait rien. Vous devez:

installer les plugins Gulp et
écrire des tâches qui les utilisent pour faire quelque chose d’utile

Il est possible d’écrire vos propres plugins, mais il est peu probable que vous ayez besoin de créer vos propres plugins. . Vous pouvez effectuer une recherche en utilisant le répertoire de Gulp à l'adresse gulpjs.com/plugins/ sur npmjs.com ou en exploitant le puissant pouvoir de Google et en recherchant «gulp quelque chose ”.

La plupart des tâches utilisent:

gulp.src (dossier) pour créer un flux à partir de fichiers d'un dossier source et
gulp.dest (dossier) pour exporter le flux sous forme de fichiers dans un dossier de construction de destination

Vous pouvez appeler n'importe quel nombre de méthodes de plug-in avec .pipe (plugin) entre .src et ] .dest .

Image Task

Ceci est mieux illustré par un exemple, créons donc une tâche élémentaire qui compresse les images et les copie dans le dossier build approprié. Ce processus pouvant prendre un certain 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 au sommet de gulpfile.js :

 // configuration de Gulp.js

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

Nous pouvons maintenant définir une fonction de traitement d'image à la fin de gulpfile.js :

 // traitement d'image
images de fonction () {

  const out = build + 'images /';

  retourne gulp.src (src + 'images / ** / *')
    .pipe (plus récent (out))
    .pipe (imagemin ({optimelevel: 5}))
    .pipe (gulp.dest (out));

});
exports.images = images;

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

Il crée une nouvelle fonction appelée images .
Il définit un dossier out dans lequel les fichiers de construction seront situés.
Il lit un flux de fichiers du dossier source src / images / . Le ** / * garantit que les images des sous-dossiers sont également traitées.
Il dirige tous les fichiers vers le module gulp-newer . Les fichiers source plus récents que les fichiers de destination correspondants sont transmis. Tout le reste est supprimé.
Il dirige les fichiers nouveaux / modifiés restants dans gulp-imagemin qui définit un argument facultatif optimisationNiveau .
Il génère des images compressées vers le Gulp [ dest / images / dossier.
Exporte une tâche publique images qui appelle la fonction images .

Save gulpfile.js ] et placez quelques images dans le dossier src / images / de votre projet avant d'exécuter la tâche à partir de la ligne de commande:

 gulp images

Toutes les images sont compressées en conséquence et vous verrez une sortie comme celle-ci:

 Utilisation du fichier gulpfile.js
Lancer 'imagemin' ...
Terminé 'imagemin' en 5.71 ms
gulp-imagemin: image1.png (enregistré 48,7 ko)
gulp-imagemin: image2.jpg (enregistré 36,2 ko)
gulp-imagemin: image3.svg (enregistré 12,8 ko)

Essayez de relancer gulp images ; aucun fichier n'est traité car aucun fichier image n'a été modifié.

Tâche HTML

Nous pouvons maintenant créer une tâche similaire qui copie les fichiers du dossier HTML source. Nous pouvons en toute sécurité minimiser notre code HTML afin de supprimer les espaces et attributs inutiles à l'aide du plug-in gulp-htmlclean .

Le plug-in gulp-noop sera également installé. Cela n'effectue aucune opération, ce qui peut être utile pour les décisions de traitement de développement / production simples:

 npm install gulp-htmlclean gulp-noop --save-dev

Ces modules sont chargés au sommet de gulpfile.js :

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

Nous pouvons maintenant exporter une fonction html à la fin de . Gulpfile.js :

 // Traitement en HTML
fonction html () {
  const out = build + 'html /';

  retourne gulp.src (src + 'html / ** / *')
    .pipe (plus récent (out));
    .pipe (devBuild? noop (): htmlclean ())
    .pipe (gulp.dest (out));
}
exports.html = gulp.series (images, html);

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

Nous ne dirigeons le code HTML que par gulp-htmlclean si NODE_ENV est défini sur production . Par conséquent, le code HTML reste non compressé pendant le développement, ce qui peut s'avérer utile pour le débogage.
La tâche exportée html utilise gulp.series () pour combiner des tâches exécutées une par la suite. autre. Dans ce cas, la fonction images () est exécutée avant html () ce qui permet aux fichiers HTML de référencer des images.

Save 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 les fichiers JavaScript en construisant un bundle de modules de base. Il va:

S'assurer que les dépendances sont chargées en premier à l'aide du plug-in gulp-deporder . Ceci analyse les commentaires en haut de chaque script pour garantir un ordre correct - tel que // requiert: defaults.js lib.js .
Concaténez tous les fichiers de script en un seul main.js fichier utilisant gulp-concat .
Supprimer tous les consoles et des instructions de débogage avec gulp-strip-debug lors de l'exécution mode de développement.
Minimisez le code avec le gulp-terser compatible avec l'ES6.
Ajoutez une carte source lorsque vous exécutez le mode de développement avec gulp-sourcemaps .

Installer

. les modules du plugin:

 npm install gulp-deporder gulp-concat gulp-strip-debug gulp-terser gulp-sourcemaps --save-dev

Ensuite, chargez-les au sommet de gulpfile.js :

 const
  ...
  concat = require ('gulp-concat'),
  deporder = require ('gulp-deporder'),
  terser = require ('gulp-terser'),
  stripdebug = devBuild? require ('gulp-strip-debug'): null,
  sourcemaps = devBuild? require ('gulp-sourcemaps'): null,

Note: les modules gulp-strip-debug et gulp-sourcemaps ne sont chargés qu'en mode de développement pour plus d'efficacité.

Ensuite, exportez un nouvelle fonction js :

 // traitement en JavaScript
fonction js () {

  retourne gulp.src (src + 'js / ** / *')
    .pipe (sourcemaps? sourcemaps.init (): noop ())
    .pipe (deporder ())
    .pipe (concat ('main.js'))
    .pipe (stripdebug? stripdebug (): noop ())
    .pipe (terser ())
    .pipe (sourcemaps? sourcemaps.write (): noop ())
    .pipe (gulp.dest (build + 'js /'));

}
exports.js = js;

La fonction est sensiblement la même que les autres tâches, mais la fonction sourcemap.init () est appelée avant les transformations de code et la méthode sourcemaps.write () est appelée après " Vous avez terminé.

Enregistrez, ajoutez quelques fichiers JavaScript dans le dossier src / js / puis exécutez gulp js pour observer la magie se dérouler!

CSS Task

19659057] Enfin, créons une tâche CSS qui compile les fichiers Sass `.scss` en un fichier `.css` unique utilisant gulp-sass . Ceci est un plugin Gulp pour node-sass qui se connecte au très rapide LibSass C / C ++ du moteur Sass . Nous présumerons que votre fichier Sass principal `scss / main.scss` est chargé du chargement de tous les partiels.

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

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

La plupart de ces plugins acceptent des paramètres. Pour plus d'informations, reportez-vous à la documentation.

Enfin, une carte source sera ajoutée au fichier CSS lors de son exécution en mode développement avec de nouveau gulp-sourcemaps .

Installez tous les modules: [19659035] npm installer gulp-sass gulp-postcss postcss-assets autopréfixe css-mqpacker cssnano --save-dev

Chargez-les au sommet de gulpfile.js :

 const
  ...
  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 exporter une nouvelle tâche css à la fin de gulpfile.js . Notez que la tâche images est définie comme une dépendance, car le plug-in postcss-assets peut référencer des images au cours du processus de construction:

 // traitement CSS.
fonction css () {

  retourne gulp.src (src + 'scss / main.scss')
    .pipe (sourcemaps? sourcemaps.init (): noop ())
    .pipe (sass ({
      outputStyle: 'imbriqué',
      imagePath: '/ images /',
      précision: 3,
      errLogToConsole: true
    }). on ('error', sass.logError))
    .pipe (postcss ([
      assets({ loadPaths: ['images/']}),
      préfixe automatique ({navigateurs: ['last 2 versions', '> 2%']}),
      mqpacker,
      Cssnano
    ]))
    .pipe (sourcemaps? sourcemaps.write (): noop ())
    .pipe (gulp.dest (build + 'css /'));

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

Notez que .on ('error', sass.logError) garantit que Sass génère les erreurs de syntaxe sur la console sans arrêter la tâche Gulp.

Enregistrez le fichier et ajoutez le fichier Sass approprié. scss et exécutez la tâche à partir de la ligne de commande:

 gulp css

Étape 6: automatiser les tâches

Nous n’avons exécuté qu’une tâche à la fois. Nous pouvons les exécuter tous en une seule commande en exportant une tâche de construction dans de gulpfile.js :

 // exécute toutes les tâches.
exports.build = gulp.parallel (exports.html, exports.css, exports.js);

La méthode gulp.parallel () exécute des tâches en même temps. Il peut être combiné avec gulp.series () pour créer des chaînes de dépendance complexes. Dans cet exemple, exports.html exports.css et exports.js sont exécutés en parallèle, mais chacun de ceux-ci peut avoir des séquences de dépendances – y compris la tâche images .

Enregistrez et entrez gulp build sur la ligne de commande pour exécuter toutes les tâches.

Est-ce trop dur? Gulp propose une méthode .watch () permettant de surveiller les fichiers source et d'exécuter une tâche appropriée chaque fois qu'un fichier est modifié. Il passe un ensemble de fichiers / dossiers à surveiller, toutes les options (non utilisées ici) et la fonction de tâche à exécuter (éventuellement dans de gulp.series () et / ou de gulp.parallel () méthodes.

Exportons une nouvelle montre à la fin de gulpfile.js :

 // surveille les modifications de fichiers
regarder la fonction (fait) {

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

  // changements html
  gulp.watch (src + 'html / ** / *', html);

  // changements de CSS
  gulp.watch (src + 'scss / ** / *', css);

  // js change
  gulp.watch (src + 'js / ** / *', js);

  terminé();

}
exports.watch = regarder;

Gulp a besoin de savoir quand une tâche a été accomplie . Ceci est normalement géré en renvoyant un flux Gulp, mais peut éventuellement être une promesse JavaScript, un émetteur d'événements, un observable, un processus enfant ou un rappel. Ici, nous utilisons un rappel nommé done () pour indiquer que toutes les tâches watch () ont été configurées.

Plutôt que d'exécuter gulp watch immédiatement, ajoutons une tâche par défaut pouvant être exécutée en exécutant gulp sans autre argument:

 // tâche par défaut
exports.default = gulp.series (exports.build, exports.watch);

Save gulpfile.js et entrez gulp sur la ligne de commande. Vos images, HTML, CSS et JavaScript seront traités, puis Gulp restera actif, surveillant les mises à jour et renouvelant les tâches si nécessaire. Appuyez sur Ctrl / Cmd + C pour abandonner le contrôle et revenir à la ligne de commande.

Étape 7: profit!

Vous pouvez trouver d'autres plugins utiles:

Les tâches Gulp peuvent exécuter n'importe quel code JavaScript. ou des modules Node.js. Par exemple:

browser-sync : rechargez automatiquement les ressources ou actualisez votre navigateur en cas de modification
del : supprimez les fichiers et dossiers (nettoyez peut-être votre dossier build au début de chaque exécution)

Investissez un peu de temps et Gulp pourrait vous faire économiser de nombreuses heures de développement frustré. Les avantages:

les plugins sont nombreux
la configuration utilisant des pipes est lisible et facile à suivre
gulpfile.js peut être adaptée et réutilisée dans d'autres projets
votre poids total de page peut être réduit pour améliorer les performances
vous pouvez simplifier votre déploiement
coder gulpfile.js est amusant (enfin, plus intéressant que les configurations JSON utilisées par d'autres coureurs de tâches)

Liens utiles:

L'application des processus ci-dessus à un site Web simple réduisait le poids total de plus de 50% ou plus. Vous pouvez tester vos propres résultats en utilisant les outils d'analyse de poids de page .

Gulp continue d'être une excellente option pour l'exécution de tâches automatisées et peut révolutionner votre flux de travail. J'espère que vous avez trouvé ce guide utile et que vous envisagez Gulp pour votre processus de production.

Craig est un consultant web britannique indépendant qui a créé sa première page pour IE2.0 en 1995. Depuis lors, il préconise les normes, l'accessibilité et les meilleures pratiquer les 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 pouvez le trouver @craigbuckler .

Source link