Gulp - Mengembangkan Aplikasi

Pada bab sebelumnya, Anda telah mempelajari tentang instalasi Gulp dan dasar-dasar Gulp yang mencakup sistem build Gulp, manajer paket, pelari tugas, struktur Gulp, dll.

Dalam bab ini, kita akan melihat dasar-dasar untuk mengembangkan aplikasi, yang meliputi:

• Mendeklarasikan dependensi yang diperlukan
• Membuat tugas untuk dependensi
• Menjalankan tugas
• Menonton tugas

Deklarasi Dependensi

Saat Anda menginstal plugin untuk aplikasi, Anda perlu menentukan dependensi untuk plugin tersebut. Dependensi ditangani oleh manajer paket seperti bower dan npm.

Mari kita ambil satu plugin bernama gulp-imageminuntuk menentukan dependensi untuknya di file konfigurasi. Plugin ini dapat digunakan untuk mengompres file gambar dan dapat diinstal menggunakan baris perintah berikut -

npm install gulp-imagemin --save-dev

Anda dapat menambahkan dependensi ke file konfigurasi Anda seperti yang ditunjukkan pada kode berikut.

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

Baris di atas menyertakan plug-in dan itu termasuk sebagai objek bernama imagemin.

Membuat Tugas untuk Dependensi

Tugas memungkinkan pendekatan modular untuk mengonfigurasi Gulp. Kita perlu membuat tugas untuk setiap dependensi, yang akan kita tambahkan saat kita menemukan dan menginstal plugin lain. Tugas Gulp akan memiliki struktur berikut -

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

Di mana 'nama-tugas' adalah nama string dan 'fungsi ()' melakukan tugas Anda. 'Gulp.task' mendaftarkan fungsi sebagai tugas di dalam nama dan menentukan ketergantungan pada tugas lainnya.

Anda dapat membuat tugas untuk dependensi yang ditentukan di atas seperti yang ditunjukkan pada kode berikut.

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

Gambar berada di src/images/**/*yang disimpan di img_srcobject. Itu disalurkan ke fungsi lain yang dibuat oleh konstruktor imagemin. Ini memampatkan gambar dari folder src dan disalin ke folder build dengan memanggildest metode dengan argumen, yang mewakili direktori target.

Menjalankan Tugas

File Gulp sudah disiapkan dan siap dijalankan. Gunakan perintah berikut di direktori proyek Anda untuk menjalankan tugas -

gulp imagemin

Saat menjalankan tugas menggunakan perintah di atas, Anda akan melihat hasil berikut di command prompt -

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