Gulp - Optimiser les images

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 imageminLa tâche 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%)