Gulp - Développement d'une application

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%)