Gulp - Guide rapide

Qu'est-ce que Gulp?

Gulp est un exécuteur de tâches qui utilise Node.js comme plate-forme. Gulp utilise uniquement le code JavaScript et aide à exécuter des tâches frontales et des applications Web à grande échelle. Il crée des tâches automatisées du système telles que la minification CSS et HTML, la concaténation des fichiers de bibliothèque et la compilation des fichiers SASS. Ces tâches peuvent être exécutées à l'aide de scripts Shell ou Bash sur la ligne de commande.

Pourquoi utiliser Gulp?

Il est plus court, plus simple et plus rapide par rapport aux autres coureurs de tâches.
Utilise SASS et LESS comme préprocesseur CSS.
Actualise automatiquement la page après la modification des fichiers source.
Facile à comprendre et à créer le Gulpfile.js car il utilise du code JavaScript pur pour créer la tâche.

L'histoire

Toute la documentation de Gulp est couverte par la licence CC0. Initialement, Gulp v1.0.0 est sorti le 15 janvier 2015, et la version actuelle de Gulp estv3.9.0.

traits

Fournit une minification et une concaténation.
Utilise du code JavaScript pur.
Convertit LESS ou SASS en compilation CSS.
Gère la manipulation de fichiers dans la mémoire et améliore la vitesse en utilisant la plate-forme Node.js.

Avantages

Énorme avantage de vitesse par rapport à tout autre coureur de tâches
Facile à coder et à comprendre.
Facile à tester les applications Web.
Les plugins sont simples à utiliser et sont conçus pour faire une chose à la fois.
Effectue des tâches répétitives à plusieurs reprises telles que la réduction des feuilles de style, la compression d'images, etc.

Désavantages

Plus de dépendances et est un nouveau venu par rapport à Grunt.
En utilisant les plugins Gulp, vous ne pouvez pas effectuer plusieurs tâches.
La configuration n'est pas aussi propre que Grunt.

Cet article fournit une procédure pas à pas pour l'installation de Gulp.

Configuration système requise pour Gulp

Operating System - Multiplateforme
Browser Support - IE (Internet Explorer 8+), Firefox, Google Chrome, Safari, Opera

Installation de Gulp

Step 1- Nous avons besoin de Node.js pour exécuter des exemples Gulp. Pour télécharger Node.js, ouvrez lehttps://nodejs.org/en/, vous verrez un écran comme indiqué ci-dessous -

Téléchargez la dernière version des fonctionnalités du fichier zip.

Step 2- Ensuite, exécutez le programme d'installation pour installer les NodeJs sur votre ordinateur.

Step 3 - Vous devez définir des variables d'environnement.

Variable utilisateur de chemin

Cliquez avec le bouton droit sur Poste de travail.
Sélectionnez Propriétés.
Sélectionnez l'onglet Avancé et cliquez sur «Variables d'environnement».

Dans la fenêtre Variables d'environnement, double-cliquez sur le CHEMIN comme indiqué dans l'écran suivant.

Vous obtiendrez une fenêtre Modifier la variable utilisateur comme indiqué dans la capture d'écran suivante. Ajoutez le chemin du dossier Node.js dans le champ Valeur de la variable en tant que C: \ Program Files \ nodejs \ node_modules \ npm. Si le chemin est déjà défini pour d'autres fichiers, vous devez mettre un point-virgule (;) après cela et ajouter le chemin Node.js comme indiqué dans la capture d'écran suivante.

À la fin, cliquez sur le bouton «Ok».

System Variable

Sous Variables système, double-cliquez sur Chemin comme indiqué dans l'écran suivant.

Vous obtiendrez une fenêtre Modifier la variable système comme indiqué dans la capture d'écran suivante. Ajoutez le chemin du dossier Node.js dans le champ Valeur de la variable en tant que C: \ Program Files \ nodejs \ et cliquez sur 'Ok' comme indiqué dans la capture d'écran suivante.

Step 4- Ouvrez l'invite de commande dans votre système et entrez la commande suivante. Il affichera la version installée de Node.js.

node -v

Step 5- Dans l'invite de commande, entrez la commande suivante pour afficher la version de npm (gestionnaire de packages Node.js) qui est utilisée pour installer les modules. Il affichera la version installée de Node.js.

npm -v

Step 6- Dans l'invite de commande, entrez la commande suivante pour installer Gulp. L'ajout de l'indicateur «-g» garantit que Gulp est globalement disponible pour n'importe quel projet.

npm install gulp -g

Step 7 - Pour vérifier que Gulp a été installé avec succès, entrez la commande suivante pour afficher la version de Gulp.

gulp -v

Dans ce chapitre, vous vous familiariserez avec quelques notions de base liées à Gulp.

Qu'est-ce qu'un système de construction?

Un système de construction est appelé collection de tâches (collectivement appelées task runners), qui automatisent le travail répétitif.

Voici une liste de certaines des tâches qui peuvent être gérées à l'aide du système de construction -

Compilation de pré-traitement CSS et JavaScript.
Minification des fichiers pour réduire sa taille.
Concaténation de fichiers en un seul.
Déclenchement du serveur pour un rechargement automatique.
Création de builds de déploiement pour stocker les fichiers résultants dans un seul emplacement.

Dans le flux de travail frontal moderne, le système de construction fonctionne avec 3 composants -

Gestionnaires de packages
Preprocessors
Coureurs de tâches et outils de création

Gestionnaires de packages

Il est utilisé pour automatiser la mise à niveau de l'installation, la suppression des dépendances requises, le nettoyage des bibliothèques et des packages utilisés dans l'environnement de développement. Un exemple pour les gestionnaires de packages sontbower et npm.

Préprocesseurs

Les préprocesseurs sont très utiles pour un flux de travail moderne et efficace en ajoutant une syntaxe optimisée et des fonctionnalités supplémentaires qui se compilent dans sa langue native.

Certains des préprocesseurs populaires sont -

CSS - SASS, LESS et Stylus.
JS - CoffeeScript, LiveScript, TypeScript, etc.
HTML - Markdown, HAML, Slim, Jade, etc.

Coureurs de tâches

Les exécuteurs de tâches automatisent des tâches telles que la conversion SASS en CSS, réduisent les fichiers, optimisent les images et de nombreuses autres tâches utilisées dans le flux de travail de développement. Gulp est l'un des exécuteurs de tâches dans l'environnement de travail frontal moderne et il fonctionne sur Node.

Configurer votre projet

Pour paramétrer votre projet dans votre ordinateur, créez un dossier appelé «travail» par exemple. Le dossier de travail contient les sous-dossiers et fichiers suivants -

Src - Emplacement des fichiers et des dossiers source HTML pré-traités.
- Images - Contient des images non compressées.
- Scripts - Contient plusieurs fichiers de script pré-traités.
- Styles - Contient plusieurs fichiers CSS pré-traités.
Build - Ce dossier sera créé automatiquement qui contient les fichiers de production.
- Images - Contient des images compressées.
- Scripts - Fichier de script unique contenant des codes minifiés.
- Styles - Fichier CSS unique contenant des codes minifiés.
gulpfile.js - C'est le fichier de configuration, qui sert à définir nos tâches.

Dans les chapitres précédents, vous avez étudié l' installation de Gulp et les bases de Gulp qui incluent le système de construction de Gulp, le gestionnaire de paquets, le gestionnaire de tâches, la structure de Gulp, etc.

Dans ce chapitre, nous verrons les bases du développement d'une application, qui comprend les éléments suivants:

Déclarer les dépendances requises
Création d'une tâche pour les dépendances
Exécuter la tâche
Regarder la tâche

Déclaration des dépendances

Lorsque vous installez des plugins pour l'application, vous devez spécifier des dépendances pour les plugins. Les dépendances sont gérées par le gestionnaire de paquets comme bower et npm.

Prenons un plugin appelé gulp-imageminpour définir ses dépendances dans le fichier de configuration. Ce plugin peut être utilisé pour compresser le fichier image et peut être installé en utilisant la ligne de commande suivante -

npm install gulp-imagemin --save-dev

Vous pouvez ajouter des dépendances à votre fichier de configuration comme indiqué dans le code suivant.

var imagemin = require('gulp-imagemin');

La ligne ci-dessus inclut le plug-in et il est inclus en tant qu'objet nommé imagemin.

Création d'une tâche pour les dépendances

Task permet une approche modulaire pour la configuration de Gulp. Nous devons créer une tâche pour chaque dépendance, que nous additionnerons au fur et à mesure que nous trouvons et installons d'autres plugins. La tâche Gulp aura la structure suivante -

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

Où «nom-tâche» est un nom de chaîne et «fonction ()» exécute votre tâche. Le 'gulp.task' enregistre la fonction en tant que tâche dans le nom et spécifie les dépendances sur d'autres tâches.

Vous pouvez créer la tâche pour la dépendance définie ci-dessus, comme indiqué dans le code suivant.

gulp.task('imagemin', function() {
   var img_src = 'src/images/**/*', img_dest = 'build/images';

   gulp.src(img_src)
   .pipe(changed(img_dest))
   .pipe(imagemin())
   .pipe(gulp.dest(img_dest));
});

Les images sont situées dans src/images/**/*qui est enregistré dans le img_srcobject. Il est redirigé vers une autre fonction créée par le constructeur imagemin. Il compresse les images du dossier src et copiées dans le dossier de construction en appelantdest méthode avec un argument, qui représente le répertoire cible.

Exécution de la tâche

Le fichier Gulp est configuré et prêt à être exécuté. Utilisez la commande suivante dans le répertoire de votre projet pour exécuter la tâche -

gulp imagemin

Lors de l'exécution de la tâche à l'aide de la commande ci-dessus, vous verrez le résultat suivant dans l'invite de commande -

C:\work>gulp imagemin
[16:59:09] Using gulpfile C:\work\gulpfile.js
[16:59:09] Starting 'imagemin'...
[16:59:09] Finished 'imagemin' after 19 ms
[16:59:09] gulp-imagemin: Minified 2 images (saved 80.81 kB - 16.9%)

Task permet une approche modulaire pour configurer Gulp. Nous devons créer une tâche pour chaque dépendance, que nous ajouterons au fur et à mesure que nous trouvons et installons d'autres plugins. La tâche Gulp aura la structure suivante -

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

Où «nom-tâche» est un nom de chaîne et «fonction ()» exécute votre tâche. Le «gulp.task» enregistre la fonction en tant que tâche dans le nom et spécifie les dépendances sur d'autres tâches.

Installer des plugins

Prenons un plugin appelé minify-csspour fusionner et réduire tous les scripts CSS. Il peut être installé en utilisant npm comme indiqué dans la commande suivante -

npm install gulp-minify-css --save-dev

Pour travailler avec «gulp-minify-css plugin», vous devez installer un autre plugin appelé «gulp-autoprefixer» comme indiqué dans la commande suivante -

npm install gulp-autoprefixer --save-dev

Pour concaténer les fichiers CSS, installez le gulp-concat comme indiqué dans la commande suivante -

npm install gulp-concat --save-dev

Après l'installation des plugins, vous devez écrire les dépendances dans votre fichier de configuration comme suit -

var autoprefix = require('gulp-autoprefixer');
var minifyCSS = require('gulp-minify-css');
var concat = require('gulp-concat');

Ajout d'une tâche au fichier Gulp

Nous devons créer une tâche pour chaque dépendance, que nous ajouterions au fur et à mesure que nous installons les plugins. La tâche Gulp aura la structure suivante -

gulp.task('styles', function() {
   gulp.src(['src/styles/*.css'])
   .pipe(concat('styles.css'))
   .pipe(autoprefix('last 2 versions'))
   .pipe(minifyCSS())
   .pipe(gulp.dest('build/styles/'));
});

Le plugin 'concat' concatène les fichiers CSS et le plugin 'autoprefix' indique la version actuelle et la version précédente de tous les navigateurs. Il minimise tous les scripts CSS du dossier src et les copie dans le dossier de construction en appelant la méthode 'dest' avec un argument, qui représente le répertoire cible.

Pour exécuter la tâche, utilisez la commande suivante dans le répertoire de votre projet -

gulp styles

De même, nous utiliserons un autre plugin appelé 'gulp-imagemin' pour compresser le fichier image, qui peut être installé à l'aide de la commande suivante -

npm install gulp-imagemin --save-dev

Vous pouvez ajouter des dépendances à votre fichier de configuration à l'aide de la commande suivante -

var imagemin = require('gulp-imagemin');

Vous pouvez créer la tâche pour la dépendance définie ci-dessus, comme indiqué dans le code suivant.

gulp.task('imagemin', function() {
   var img_src = 'src/images/**/*', img_dest = 'build/images';
   
   gulp.src(img_src)
   .pipe(changed(img_dest))
   .pipe(imagemin())
   .pipe(gulp.dest(img_dest));
});

Les images se trouvent dans «src / images / ** / *» qui sont enregistrées dans l'objet img_srcobject. Il est redirigé vers d'autres fonctions créées par le constructeur 'imagemin'. Il compresse les images du dossier src et les copie dans le dossier de construction en appelant la méthode 'dest' avec un argument, qui représente le répertoire cible.

Pour exécuter la tâche, utilisez la commande suivante dans le répertoire de votre projet -

gulp imagemin

Combinaison de plusieurs tâches

Vous pouvez exécuter plusieurs tâches à la fois en créant une tâche par défaut dans le fichier de configuration comme indiqué dans le code suivant -

gulp.task('default', ['imagemin', 'styles'], function() {

});

Le fichier Gulp est configuré et prêt à être exécuté. Exécutez la commande suivante dans le répertoire de votre projet pour exécuter les tâches combinées ci-dessus -

gulp

Lors de l'exécution de la tâche à l'aide de la commande ci-dessus, vous obtiendrez le résultat suivant dans l'invite de commande -

C:\work>gulp
[16:08:51] Using gulpfile C:\work\gulpfile.js
[16:08:51] Starting 'imagemin'...
[16:08:51] Finished 'imagemin' after 20 ms
[16:08:51] Starting 'styles'...
[16:08:51] Finished 'styles' after 13 ms
[16:08:51] Starting 'default'...
[16:08:51] Finished 'default' after 6.13 ms
[16:08:51] gulp-imagemin: Minified 0 images

La méthode Watch est utilisée pour surveiller vos fichiers source. Lorsque des modifications sont apportées au fichier source, la montre exécute une tâche appropriée. Vous pouvez utiliser la tâche «par défaut» pour surveiller les modifications apportées aux fichiers HTML, CSS et JavaScript.

Mettre à jour la tâche par défaut

Dans le chapitre précédent, vous avez appris à avaler des tâches combinées à l' aide de la tâche par défaut. Nous avons utilisé gulp-minify-css, gulp-autoprefixer et gulp-concatplugins, et créé une tâche de styles pour réduire les fichiers CSS.

Pour regarder le fichier CSS, nous devons mettre à jour la tâche `` par défaut '' comme indiqué dans le code suivant:

gulp.task('default', ['styles'], function() {
   // watch for CSS changes
   gulp.watch('src/styles/*.css', function() {
      // run styles upon changes
      gulp.run('styles');
   });
});

Tous les fichiers CSS sous work/src/styles/ Le dossier sera surveillé et lors des modifications apportées à ces fichiers, la tâche de styles sera exécutée.

Exécuter la tâche par défaut

Exécutez la tâche «par défaut» à l'aide de la commande suivante.

gulp

Après avoir exécuté la commande ci-dessus, vous recevrez la sortie suivante.

C:\work>gulp
[17:11:28] Using gulpfile C:\work\gulpfile.js
[17:11:28] Starting 'styles'...
[17:11:28] Finished 'styles' after 22 ms
[17:11:28] Starting 'default'...
[17:11:28] Finished 'default' after 21 ms

Chaque fois que des modifications sont apportées aux fichiers CSS, vous recevrez la sortie suivante.

C:\work>gulp
[17:11:28] Using gulpfile C:\work\gulpfile.js
[17:11:28] Starting 'styles'...
[17:11:28] Finished 'styles' after 22 ms
[17:11:28] Starting 'default'...
[17:11:28] Finished 'default' after 21 ms
gulp.run() has been deprecated. Use task dependencies or gulp.watch task 
   triggering instead.
[17:18:46] Starting 'styles'...
[17:18:46] Finished 'styles' after 5.1 ms

Le processus Watch restera actif et répondra à vos modifications. Vous pouvez appuyer surCtrl+Cpour terminer le processus de surveillance et revenir à la ligne de commande.

Live Reload spécifie les changements dans le système de fichiers. BrowserSyncest utilisé pour regarder tous les fichiers HTML et CSS dans le répertoire CSS et effectuer un rechargement en direct de la page dans tous les navigateurs, chaque fois que les fichiers sont modifiés. BrowserSync accélère le flux de travail en synchronisant les URL, les interactions et les modifications de code sur plusieurs appareils.

Installation du plug-in BrowserSync

Le plugin BrowserSync fournit une injection CSS entre navigateurs et peut être installé à l'aide de la commande suivante.

npm install browser-sync --save-dev

Configuration du plug-in BrowserSync

Pour utiliser le plugin BrowserSync, vous devez écrire la dépendance dans votre fichier de configuration comme indiqué dans la commande suivante.

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

Vous devez créer une tâche pour que BrowserSync fonctionne avec le serveur utilisant Gulp. Puisque vous utilisez le serveur, vous devez donc appeler BrowserSync à propos de la racine de votre serveur. Ici, nous utilisons le répertoire de base comme «build».

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

Vous pouvez également injecter de nouveaux styles dans le navigateur en utilisant la tâche suivante pour le fichier CSS.

gulp.task('styles', function() {
   
   gulp.src(['src/styles/*.css'])
   .pipe(concat('style.css'))
   .pipe(autoprefix('last 2 versions'))
   .pipe(minifyCSS())
   .pipe(gulp.dest('build/styles/'))
   .pipe(browserSync.reload({
      stream: true
   }))
});

Avant de créer une tâche pour BrowserSync, vous devez installer les plugins à l'aide du gestionnaire de packages et écrire les dépendances dans votre fichier de configuration comme défini dans ce chapitre .

Lorsque vous avez terminé la configuration, exécutez à la fois BrowserSync et watchTask pour l'apparition de l'effet de rechargement en direct. Au lieu d'exécuter deux lignes de commande séparément, nous les exécuterons ensemble en ajoutant browserSynctask avec watchTask comme indiqué dans le code suivant.

gulp.task('default', ['browserSync', 'styles'], function (){
   gulp.watch('src/styles/*.css', ['styles']);
});

Exécutez la commande suivante dans le répertoire de votre projet pour exécuter les tâches combinées ci-dessus.

gulp

Après avoir exécuté la tâche à l'aide de la commande ci-dessus, vous obtiendrez le résultat suivant dans l'invite de commande.

C:\project>gulp
[13:01:39] Using gulpfile C:\project\gulpfile.js
[13:01:39] Starting 'browserSync'...
[13:01:39] Finished 'browserSync' after 20 ms
[13:01:39] Starting 'styles'...
[13:01:39] Finished 'styles' after 21 ms
[13:01:39] Starting 'default'...
[13:01:39] Finished 'default' after 15 ms
[BS] 1 file changed (style.css)
[BS] Access URLs:
 ------------------------------------
       Local: http://localhost:3000
    External: http://192.168.1.4:3000
 ------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.1.4:3001
 ------------------------------------
[BS] Serving files from: build

Cela ouvrira la fenêtre du navigateur avec l'URL http://localhost:3000/. Toutes les modifications apportées au fichier CSS seront reflétées dans l'invite de commande et le navigateur se recharge automatiquement avec les styles modifiés.

Dans ce chapitre, vous apprendrez comment optimiser CSS et JavaScript. L'optimisation est nécessaire pour supprimer les données inutiles (par exemple les espaces et les caractères inutilisés) des fichiers source. Cela réduit la taille des fichiers et leur permet de se charger plus rapidement

Installer des plugins pour optimiser CSS et JavaScript

Accédez au répertoire «work» depuis votre ligne de commande et installez les plugins «gulp-uglify», «gulp-minify-css» et «gulp-concat» en utilisant la commande suivante -

npm install gulp-uglify gulp-minify-css gulp-concat

Déclarer des dépendances et créer des tâches

Dans votre fichier de configuration gulpfile.js, déclarez d'abord les dépendances comme indiqué dans le code suivant.

var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var minify = require('gulp-minify-css');

Ensuite, vous devez créer des tâches pour optimiser CSS et JavaScript, comme indiqué dans le code suivant.

gulp.task('js', function(){
   gulp.src('src/scripts/*.js')
   .pipe(concat('script.js'))
   .pipe(uglify())
   .pipe(gulp.dest('build/scripts/'));
});

gulp.task('css', function(){
   gulp.src('src/styles/*.css')
   .pipe(concat('styles.css'))
   .pipe(minify())
   .pipe(gulp.dest('build/styles/'));
});

gulp.task('default',['js','css'],function(){
});

le js la tâche accepte .js fichiers de src/scripts/dossier. Il concatène et uglifie lejs fichiers, puis produit build/scripts/script.js fichier.

le CSS la tâche acceptera .css fichiers de src/styles/dossier. Il concatène et minifieCSS fichiers, puis produit build/styles/styles.css fichier.

Exécutez les tâches

Le fichier de configuration est configuré et prêt à être exécuté. Utilisez la commande suivante pour exécuter la tâche.

gulp

Lors de l'exécution de la tâche à l'aide de la commande ci-dessus, vous recevrez le résultat suivant dans l'invite de commande.

C:\work>gulp
[13:16:34] Using gulpfile C:\work\gulpfile.js
[13:16:34] Starting 'js'...
[13:16:34] Finished 'js' after 24 ms
[13:16:34] Starting 'css'...
[13:16:34] Finished 'css' after 6.05 ms
[13:16:34] Starting 'default'...
[13:16:34] Finished 'default' after 5.04 μs

Dans ce chapitre, vous apprendrez à optimiser les images. L'optimisation réduira la taille des images et accélérera le chargement.

Installer des plugins pour optimiser les images

Allez dans le répertoire «work» depuis votre ligne de commande et installez les plugins «gulp-changed» et «gulp-imagemin» en utilisant les commandes suivantes.

npm install gulp-changed --save-dev
npm install gulp-imagemin --save-dev

Déclarer des dépendances et créer des tâches

Dans votre fichier de configuration gulpfile.js, déclarez d'abord les dépendances comme indiqué dans la commande suivante.

var gulp = require('gulp');
var changed = require('gulp-changed');
var imagemin = require('gulp-imagemin');

Ensuite, vous devez créer des tâches pour optimiser les images, comme indiqué dans le code suivant.

gulp.task('imagemin', function() {
   var imgSrc = 'src/images/*.+(png|jpg|gif)',
   imgDst = 'build/images';
   
   gulp.src(imgSrc)
   .pipe(changed(imgDst))
   .pipe(imagemin())
   .pipe(gulp.dest(imgDst));
});

gulp.task('default',['imagemin'],function(){
});

le imagemintask acceptera les images png, jpg et gif du dossier src / images / et les minifiera avant de les écrire dans la destination. lechanged()garantit que seuls les nouveaux fichiers sont transmis à chaque fois pour la réduction. Le plugin gulp-changed ne traitera que les nouveaux fichiers et utilisera donc un temps précieux.

Exécutez les tâches

Le fichier de configuration est configuré et prêt à être exécuté. Utilisez la commande suivante pour exécuter la tâche.

gulp

Lors de l'exécution de la tâche à l'aide de la commande ci-dessus, vous recevrez le résultat suivant dans l'invite de commande.

C:\work>gulp
[15:55:49] Using gulpfile C:\work\gulpfile.js
[15:55:49] Starting 'imagemin'...
[15:55:49] Finished 'imagemin' after 23 ms
[15:55:49] Starting 'default'...
[15:55:49] Finished 'default' after 23 μs
[15:55:54] gulp-imagemin: Minified 1 images (saved 558.3 kB - 8.3%)

Gulp fournit des plugins utiles pour travailler avec HTML et CSS, JavaScript, graphiques et d'autres choses comme décrit dans les tableaux suivants.

Plugins HTML et CSS

N ° Sr.	Plugin et description
1	autoprefixer Il inclut automatiquement des préfixes aux propriétés CSS.
2	gulp-browser-sync Il est utilisé pour regarder tous les fichiers HTML et CSS dans le répertoire CSS et effectue le rechargement en direct de la page dans tous les navigateurs, chaque fois que les fichiers sont modifiés
3	gulp-useref Il est utilisé pour remplacer les références à des scripts ou des feuilles de style non optimisés.
4	gulp-email-design Il crée des modèles de courrier électronique HTML qui convertissent les styles CSS en inline.
5	gulp-uncss Il optimise les fichiers CSS et trouve les styles inutilisés et dupliqués.
6	gulp-csso Il s'agit d'un optimiseur CSS, qui minimise les fichiers CSS, ce qui réduit la taille des fichiers.
sept	gulp-htmlmin Il minimise les fichiers HTML.
8	gulp-csscomb Il est utilisé pour créer un formateur de style pour CSS.
9	gulp-csslint Il spécifie un linter CSS.
dix	gulp-htmlhint Il spécifie un validateur HTML.

Plugins JavaScript

N ° Sr.	Plugin et description
1	gulp-autopolyfiller C'est la même chose que l'autoprefixer qui inclut les polyfills nécessaires pour JavaScript.
2	gulp-jsfmt Il est utilisé pour rechercher des extraits de code spécifiques.
3	gulp-jscs Il est utilisé pour vérifier le style de code JavaScript.
4	gulp-modernizr Il spécifie les fonctionnalités HTML, CSS et JavaScript que le navigateur de l'utilisateur a à offrir.
5	gulp-express Il démarre le serveur Web gulp express.js.
6	gulp-requirejs Il utilise require.js pour combiner les modules AMD require.js en un seul fichier.
sept	gulp-plato Il génère des rapports d'analyse de complexité.
8	gulp-complexity Il analyse la complexité et la maintenabilité du code.
9	fixmyjs Il corrige les résultats JSHint.
dix	gulp-jscpd Il est utilisé comme détecteur de copier / coller pour le code source.
11	gulp-jsonlint C'est un validateur JSON.
12	gulp-uglify Il minimise les fichiers JavaScript.
13	gulp-concat Il concatène les fichiers CSS.

Plugins de tests unitaires

N ° Sr.	Plugin et description
1	gulp-nodeunit Il exécute des tests unitaires de nœuds à partir de Gulp.
2	gulp-jasmine Il est utilisé pour signaler les problèmes liés à la sortie.
3	gulp-qunit Il fournit une sortie de console de base pour les tests QUnit et utilise le module de nœud PhantomJS et le plugin PhantomJS runner QUnit.
4	gulp-mocha Il spécifie le wrapper fin autour de Mocha et exécute les tests Mocha.
5	gulp-karma Il est obsolète dans Gulp.

Plugins graphiques

N ° Sr.	Plugin et description
1	gulpicon Il génère des sprites à partir de SVG et les convertit en PNG.
2	gulp-iconfont Il est utilisé avec les polices Web pour créer des fichiers WOFF, EOT, TTF à partir de SVG.
3	gulp-imacss Il transforme les fichiers image en URI de données et les place dans un seul fichier CSS.
4	gulp-responsive Il génère des images réactives pour différents appareils
5	gulp-sharp Il est utilisé pour modifier et redimensionner l'orientation et l'arrière-plan de l'image.
6	gulp-svgstore Il combine les fichiers SVG en un seul avec des éléments <symbol>.
sept	gulp-imagemin & gulp-tinypng Il est utilisé pour compresser les images telles que PNG, JPEG, GIF, SVG.
8	gulp-spritesmith Il est utilisé pour créer une feuille de sprites à partir d'un ensemble d'images et de variables CSS.

Plugins de compilateurs

N ° Sr.	Plugin et description
1	gulp-less Il fournit le plugin LESS pour Gulp.
2	gulp-sass Il fournit le plugin SASS pour Gulp.
3	gulp-compass Il fournit un plugin de boussole pour Gulp.
4	gulp-stylus Il est utilisé pour conserver le stylet en CSS.
5	gulp-coffee Il fournit un plugin coffeescript pour Gulp.
6	gulp-handlebars Il fournit un plugin de guidon pour Gulp.
sept	gulp-jst Il fournit des modèles de soulignement dans JST.
8	gulp-react Il spécifie les modèles Facebook React JSX en JavaScript.
9	gulp-nunjucks Il spécifie les modèles Nunjucks dans JST.
dix	gulp-dustjs Il spécifie les modèles Dust dans JST.
11	gulp-angular-templatecache Il spécifie les modèles AngularJS dans le templateCache.

Autres plugins

Le plugin gulp-clean supprime les fichiers et les dossiers et le plugin gulp-copy copie les fichiers de la source vers la nouvelle destination.

N ° Sr.	Plugin et description
1	gulp-grunt Il exécute les tâches Grunt de Gulp
2	gulp-watch Il surveille les fichiers chaque fois que des modifications sont apportées.
3	gulp-notify Il notifie le message d'erreur chaque fois qu'une tâche échoue.
4	gulp-git Il permet d'utiliser les commandes Git.
5	gulp-jsdoc Il crée une documentation JavaScript pour Gulp.
6	gulp-rev Il permet de réviser les ressources statiques des noms de fichiers.
sept	gulp-bump Il augmente les versions dans le package JSON.
8	gulp-bower-files Il est utilisé pour injecter des paquets de bower.
9	gulp-removelogs Il supprime les instructions console.log.
dix	gulp-preprocess Il prétraite les fichiers HTML, JavaScript et autres en fonction du contexte ou de la configuration de l'environnement.
11	gulp-duration Il spécifie la durée des tâches Gulp.
12	gulp-changed & gulp-newer Il exécute les fichiers modifiés et les fichiers plus récents.
13	gulp-connect Il est utilisé pour exécuter un serveur Web avec LiveReload.
14	gulp-shell Il exécute les commandes Shell.
15	gulp-ssh Il se connecte à l'aide de tâches SSH et SFTP.
16	gulp-zip Il compresse les fichiers et les dossiers.
17	gulp-clean & gulp-copy
18	gulp-filesize Il spécifie la taille du fichier dans un format lisible par l'homme.
19	gulp-util Il fournit des utilitaires pour les plugins gulp.

Dans ce chapitre, vous apprendrez à nettoyer les fichiers générés. Comme nous générons automatiquement les fichiers, assurez-vous que les fichiers inutiles doivent être supprimés avant d'exécuter votre build. Cette procédure s'appellecleaning. ledel plugin peut être utilisé à cette fin.

Installation de del Plugins

Dans votre ligne de commande, installez le plugin en entrant la commande suivante.

npm install del --save-dev

Déclarer des dépendances et créer des tâches

Dans votre fichier de configuration gulpfile.js, déclarez les dépendances comme indiqué dans la commande suivante.

var del = require('del');

Ensuite, créez une tâche comme indiqué dans le code suivant.

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

La tâche ci-dessus nettoiera toute la construction. La tâche de nettoyage efface toutes les captures d'image et supprime tous les anciens fichiers présents dans la construction.

Il est possible de nettoyer uniquement un fichier ou un dossier spécifique et de laisser certains d'entre eux intacts, comme illustré dans le code suivant.

gulp.task('clean:build', function() {
   //return del.sync('build');
   return del([
      'build/temp/',
      // instructs to clean temp folder
      '!build/package.json'
      // negate to instruct not to clean package.json file ]);
});

Dans la tâche ci-dessus, seul le temp le dossier sera nettoyé en laissant package.json intacte.

↰ Previous page

Gulp - Guide rapide

Qu'est-ce que Gulp?

Pourquoi utiliser Gulp?

L'histoire

traits

Avantages

Désavantages

Configuration système requise pour Gulp

Installation de Gulp

Variable utilisateur de chemin

Qu'est-ce qu'un système de construction?

Gestionnaires de packages

Préprocesseurs

Coureurs de tâches

Configurer votre projet

Déclaration des dépendances

Création d'une tâche pour les dépendances

Exécution de la tâche

Installer des plugins

Ajout d'une tâche au fichier Gulp

Combinaison de plusieurs tâches

Mettre à jour la tâche par défaut

Exécuter la tâche par défaut

Installation du plug-in BrowserSync

Configuration du plug-in BrowserSync

Installer des plugins pour optimiser CSS et JavaScript

Déclarer des dépendances et créer des tâches

Exécutez les tâches

Installer des plugins pour optimiser les images

Déclarer des dépendances et créer des tâches

Exécutez les tâches

Plugins HTML et CSS

Plugins JavaScript

Plugins de tests unitaires

Plugins graphiques

Plugins de compilateurs

Autres plugins

Installation de del Plugins

Déclarer des dépendances et créer des tâches

Tutoriel Gulp

Gulp des ressources utiles