Gulp - Mengoptimalkan Gambar

Dalam bab ini, Anda akan mempelajari cara mengoptimalkan gambar. Mengoptimalkan akan mengurangi ukuran gambar dan membantu dalam memuat lebih cepat.

Instal Plugin untuk Mengoptimalkan Gambar

Pergi ke direktori "work" dari baris perintah Anda dan instal plugin "gulp-changes" dan "gulp-imagemin" dengan menggunakan perintah berikut.

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

Deklarasikan Dependensi dan Buat Tugas

Di file konfigurasi Anda gulpfile.js, pertama-tama deklarasikan dependensi seperti yang ditunjukkan pada perintah berikut.

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

Selanjutnya, Anda perlu membuat tugas untuk mengoptimalkan gambar seperti yang ditunjukkan pada kode berikut.

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(){
});

Itu imagemintugas akan menerima gambar png, jpg dan gif dari folder src / images / dan mengecilkannya sebelum menulisnya ke tujuan. Ituchanged()memastikan bahwa hanya file baru yang diteruskan setiap kali untuk meminimalkan. The tegukan-berubah Plugin hanya akan memproses file baru dan karenanya dimanfaatkan waktu yang berharga.

Jalankan Tugas

File konfigurasi sudah disiapkan dan siap dijalankan. Gunakan perintah berikut untuk menjalankan tugas.

gulp

Saat menjalankan tugas menggunakan perintah di atas, Anda akan menerima hasil berikut di prompt perintah.

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