Gulp | Langkah Mudah Membuat Task dengan Gulp
Kemarin sudah kita bahas bersama terkait Pengaturan projek gulp dan juga strukturnya. Selanjutnya akan kita bahas bersama Langkah Mudah Membuat Task dengan Gulp.
owin
---
Solvedia - Kemarin sudah kita bahas bersama terkait Pengaturan projek gulp dan juga strukturnya. Selanjutnya akan kita bahas bersama Langkah Mudah Membuat Task dengan Gulp.
(Baca Juga : Langkah Mudah Membuat Task dengan Gulp)
Berikut ini beberapa task dan plugin yang akan kita gunakan.
- Local Webserver dan sinkronisasi dengan browser.
Plugin --> browsersync - Compile SCSS
Plugin --> gulp-sass - Manajemen Error
Plugin --> gulp-plumber, gulp-notify - Deployment, proses optimasi file dari folder app ke folder build, sekaligus mengkompres folder ke dalam file zip.
Plugin --> marge-stream, gulp-htmlmin, gulp-clean, gulp-uglify, gulp-imagemin, gulp-concat, gulp-cssnano, gulp-zip.
Untuk menginstal plugin gunakan command berikut :
Nah Kalau sobat ndak mau repot tuk menginstal plugin satu persatu, nih saya kasih tips tuk install banyak plugin sekaligus. Berikut command untuk menginstall semua plugin di atas.
Oke deh, langsung saja kita ke inti pembahas kali ini yaitu, pembuatan task dengan Gulp.
1. Local Webserver dan sinkronisasi dengan browser.
Pada Task ini digunakan sebagai local webserver, sehingga kita bisa mengakses dengan url http://localhost:port. Setiap perunahan juga akan tersinkronisasi otomatis dengan browser. berikut perintahnya:
Keterangan :
Baris 13 --> Disini kita menggunakan watch untuk memantau perubahan file di dalam folder app. Jika terjadi perubahan maka browser otomatis akan merefresh laman.
2. Compile SCSS
Task ini digunakan untuk compile file *.scss dari folder scss ke folder css. Jadi task awal akan berubah seperti berikut :
3. Manajemen Error
Semisal ada terjadi kesalahan pada script sedikit saja contohnya kurang titik koma pada file css maka proses gulp akan berhenti, dan asiknya si gulp memberikan notifikasi kepada kita, sehingga kita dapat memanajemen error dengan lebih baik. Saya sendiri biasanya menggunakan gulp-plumber agar proses gulp teteap berjalan dan gulp-notify untuk kasih notifikasi error. Jadi task sass di rubah menjadi seperti ini :
4. Deployment
Nah, pada proses ini file yang berada pada folder app akan di optimasi dan hasilnya di pindahkan ke folder build. Sebelum melakukan proses optimasi sebaiknya folder buil dibersihkan terlebih dahulu.
Sekarang baru kita optimasi satu persatu mulai dari file css, js, images, dan fonts.
Perhatikan pada baris ke-33 disini saya menyisipkan task cleanBuild dimana tujuannya adalah supaya task ini di eksekusi terlebih dahulu sebelum mengerjakan task yang lain.
Nah, Sampai disini proses deploy sudah selesai, dan sekarang kita akan membuat file zip dari folder build. Hasil file zip akan disimpan di folder build.
Kesimpulan
Gulp.js sangat flexible dalam pengelolaan task, dapat disesuaikan dengan preferensi atau workflow masing-masing.
Tentunya masih banyak task atau plugin lainnya yang bisa digali seperti testing, deploy ke server dan lain-lain. Namun artikel ini telah mencover dasar penggunaan gulp dalam otomatisasi frontend development. Untuk melihat daftar plugin gulp silahkan cek disini : https://gulpjs.com/plugins/
Mudah-mudah artikel ini bisa bermanfaat. Jika ada pertanyaan, maupun kritik silahkan tuliskan komentar sobat di bawah ya... :)