Agak telat sih sebenarnya, Gulp uda nge-hype sejak tahun lalu, ditambah lagi saya sebelumnya lebih fokus pada backend development, gak terlalu perhatian dengan tools seperti ini, namun belakangan karena juga banyak bermain dengan CSS dan Javascript, membuat saya mengenal gulp, dan ternyata tools ini sangat menarik dan bisa digunakan cukup luas bukan sekedar untuk para frontend engineer.
Kamu bisa buka website resmi gulp, untuk detail lengkap tentang apa itu gulp, tapi secara singkat dan dalam bahasa saya, gulp adalah tool yang akan membantu kamu secara otomatis melakukan banyak hal, atau sebutan kerennya, automator, task runner. contoh paling gampang, biasanya saya bakal nge-set gulp supaya ketika saya menyimpan sebuah file less, gulp akan melakukan kompilasi menjadi file CSS, lalu akan membuat versi minify nya, semua dilakukan secara otomatis.
Instalasi
Untuk melakukan instalasi gulp, mesti menggunakan npm, kamu gak punya npm? ini 2015 bro! 😉 kalau kamu (memang bener) gak punya npm, kamu bisa install nodejs dulu, download disini https://nodejs.org.
Setelah terinstall, kamu bisa install gulp dengan menjalankan perintah berikut di command line mu,
sudo npm install --global gulp
Setelah selesai, gulp akan terinstall secara global di laptopmu.
Memulai Project
Untuk memulai project, kamu bisa dengan mudah buat folder dimana saja, lalu gunakan command line mu untuk masuk ke folder tersebut.
Lalu di dalam folder tersebut, jalankan perintah
$ npm install gulp
eh, kok nginstall gulp lagi? iya, gulp yang diinstall secara global tadi supaya kamu bisa melakukan perintah ‘gulp‘ dari command line mu dimana saja, sedangkan ‘gulp‘ yang diinstall kali ini adalah gulp yang akan digunakan di dalam file javascript.
Mestinya sekarang didalam foldermu bakal muncul folder baru bernama node_modules yang akan berisi paket-paket dependency javascript yang bisa dipakai.
Sekarang, buat file bernama gulpfile.js, file ini nantinya akan berisi workflow atau alur kerja yang akan kita set. Selanjutnya kita akan membuat task pertama untuk keperluan kompilasi file Less menjadi CSS.
Kompilasi file Less
Wait, kenapa harus Less? personal choice sih, tapi prinsipnya akan sama saja dengan SASS.
Pertama, install dulu plugin gulp-less
$ npm install gulp-less
Setelah selesai, buka file gulpfile.js tadi, lalu masukkan code berikut.
var gulp = require( "gulp" );
var less = require( "gulp-less" );
gulp.task("styles", function(){
gulp.src( "src/less/*.less" )
.pipe( less() )
.pipe( gulp.dest( "dist" ) )
});
Kode diatas adalah contoh task sederhana untuk kebutuhan kompilasi file less. Berikut penjelasan masing-masing kode.
var gulp = require( "gulp" );
var less = require( "gulp-less" );
kode ini bertujuan untuk me-load pake dependency dari folder node_modules tadi, lalu di assign ke variable masing-masing.
gulp.task("styles", function(){
....
)}
kode ini untuk menyatakan sebuah task yang akan dieksekusi oleh gulp, “styles” adalah nama task nya.
gulp.src( "src/less/*.less" )
Kode ini untuk mencari file berekstensi .less di dalam folder src/less/. jadi file less apapun dalam folder ini akan di kompile.
.pipe( less() )
.pipe() disini akan melanjutkan hasil dari kode sebelumnya, kalau kode sebelumnya adalah mencari file less, setelah ketemu akan menjalankan .pipe() ini, pipe ini sendiri disini menjalankan method less() yang berasal dari plugin gulp-less dan kita assign ke variable less. (var less diatas tadi, dipanggil dengan less(), got it?).
.pipe( gulp.dest( "dist" ) )
Oke lanjut, kita ‘pipe‘ lagi ke alur berikutnya, kali ini kita menggunakan gulp.dest() yang merupakan perintah untuk mengeluarkan output dari hasil less() tadi ke dalam folder “dist“. Sampai sini task “styles” telah berakhir.
So, lets recap, gulp task “styles” akan mencari file .less didalam folder /src/less/ lalu kemudian menjalankan plugin less() dan kemudian output nya dikeluarkan di folder “dist“.
Oke, sekarang kita akan coba menjalankan task ini. Seperti yang kita sudah buat di gulpfile.js tadi, berarti paling tidak kita butuh 2 folder. folder pertama adalah src/less/ dan folder kedua adalah dist.
Wait, kenapa src/less dan dist ?
Lagi, ini adalah personal choice dari saya. saya biasanya membuat 2 folder utama untuk setiap project, src akan berisi file source untuk development. biasanya didalamnya akan ada folder less, js, scss, jade ataupun file source lain yang dipakai untuk keperluan developer.
Lalu folder kedua adalah dist, dimana folder ini adalah untuk dibagikan (distribution) kepada enduser atau orang lain yang tinggal pakai, gak perlu kompilasi dan lain-lain. Biasa disebut file production.
Tentu saja, kamu bisa pakai struktur folder sesuai selera, tinggal sesuaiin aja path yang ada didalam task tadi.
Oke, balik ke less tadi, sekarang kamu bisa testing buat file less buat dikompilasi dengan menggunakan gulp. Saya gak akan menjelaskan untuk dan apa itu less kali ini, so kamu bisa lihat http://lesscss.org atau yaudah deh, kamu bisa download contoh file less sederhana di sini.
Simpan file less tadi di folder src/less, setelah itu kembali ke command line, sekarang kamu bisa menjalankan perintah
$ gulp styles
Akan muncul sedikit keterangan bahwa task sudah berhasil dijalankan, dan jika kamu check di folder dist mu, akan muncul file css baru sesuai nama file less tadi.
Oke, cukup, kalau kamu gagal, tidak menemukan file css hasil kompilasi di folder dist mu, maka kamu harus berhenti disini, dan check ulang keatas untuk melihat apa yang terlewat.
Minify file CSS
Kalau task styles mu sukses dan menghasil file CSS di folder dist, maka selanjutnya kita akan mencoba menambah ‘pipe‘ baru untuk lebih mengoptimalkan CSS yang akan di generate. Kita akan menambahkan minify.
Minify adalah mmm masa kamu gak tau sih, itu versi mini dari file source code, biasanya dengan membuang karakter yang gak perlu (seperti spasi dan line break atau ‘enter’) atau juga komentar. Hasilnya, akan membuat file lebih kecil dan ringan untuk di load di website mu.
Pertama install plugin (lagi) gulp-cssmin.
$ npm install gulp-cssmin
Setelah itu, kita load di gulpfile.js sama seperti sebelumnya.
var cssmin = require( "gulp-cssmin" );
Oke, lalu kita tambahkan ‘pipe‘ baru kedalam task styles tadi, sehingga task styles tadi akan menjadi seperti ini.
gulp.task("styles", function(){
gulp.src( "src/less/*.less" )
.pipe( less() )
.pipe( cssmin() )
.pipe( gulp.dest( "dist" ) )
});
Jadi setelah dikompilasi menggunakan less() akan di lanjutkan dengan cssmin() sebelum menuju pipe terakhir. Jika sudah, kamu bisa coba lagi dengan menjalan gulp styles lagi di command line mu, dan kali ini isi file CSS didalam folder dist mu akan terlihat lebih ‘semrawut’ 😀 dan file size nya harusnya menjadi lebih kecil dari sebelumnya 😉
Concat Javascript
Saya gak ketemu bahasa indonesia yang lebih tepat dari concat / concatenation, prinsipnya adalah menyambungkan beberapa hal menjadi satu kesatuan secara berurutan, dalam hal ini kode javascript.
Ok, kembali ke command line untuk install plugin gulp-concat
$ npm install gulp-concat
Setelah terinstall, seperti sebelumnya, kita load dengan menggunakan require.
var concat = require( "gulp-concat" )
Lalu kita akan buat task untuk concat ini dengan nama “scripts“.
gulp.task( "scripts", function () {
gulp.src( [
"src/js/satu.js",
"src/js/dua.js"
] )
.pipe( concat( "scripts.js" ) )
.pipe( gulp.dest( "dist" ) );
} )
Sedikit berbeda dari sebelumnya, plugin concat bisa menggunakan lebih dari 1 source ( kalau cuma 1 source, gak perlu di concat lah 😀 ). File yang akan di concat, dimasukkan kedalam gulp.src sesuai urutan kebutuhannya.
Lalu, kita akan melakukan concat dengan perintah concat(xx) dimana xx adalah nama file output yang diinginkan, saya memberi nama “scripts.js“.
Dan seperti sebelumnya, task diakhiri dengan “pipe” gulp.dest ke folder “dist”.
Berikutnya, untuk nyobain, buat dulu file satu.js dan dua.js di folder src/js, isi dengan sample code javascript mu, jika sudah cobain jalankan di command line mu.
$ gulp scripts
Setelah itu sekarang mestinya di folder dist mu, bakal ada file scripts.js yang merupakan gabungan dari satu.js dan dua.js.
Tinggal masukin jquery dan pluginnya ( eh masih pake jQuery? 😀 ) di folder src/js mu lalu di concat jadi 1 file compact + kamu bisa minify dengan https://www.npmjs.com/package/gulp-uglify supaya tetep mini.
Gulp Watch
Kalau kamu perhatikan, maka kita akan menjalankan gulp styles dan gulp scripts untuk setiap kompilasi ataupun concat yang mana ini bakal ribet, nah sebagai automator tool mestinya ini berjalan secara otomatis, oleh karena itu, ada yang namanya gulp watch. Gulp watch adalah fitur untuk membuat gulp selalu melihat perubahan file secara real time ketika ada perubahan file (menyimpan, menghapus atau mengganti file).
Oke sekarang kita akan buat task bernama “default” dengan kode sebagai berikut
gulp.task( "default", [
"styles",
"scripts"
], function () {
gulp.watch(
"src/less/*.less", [ "styles" ]
);
gulp.watch(
"src/js/*.js", [ "scripts" ]
);
} )
Kode diawali dengan
gulp.task( "default", [
"styles",
"scripts"
], function () {
..
})
Kode tersebut untuk menset task default, agar ketika gulp default di jalankan, lakukan juga task styles dan scripts.
Lalu berikutnya di dalam function, ada gulp watch.
gulp.watch(
"src/less/*.less", [ "styles" ]
);
gulp.watch(
"src/js/*.js", [ "scripts" ]
);
Sampai disini mestinya kamu sudah familiar dengan ini, intinya gulp akan melihat 2 tipe file, less di folder src/less dan js di folder src/js lalu menjalankan task styles dan scripts.
Cukup sampai disitu, sekarang kamu bisa mencoba menjalankan gulp di command line
$ gulp
gitu doang?
Yep, tidak seperti sebelumnya, dimana kamu mesti memasukkan nama task setelah perintah gulp (contoh: gulp styles, atau gulp scripts) kamu cukup masukkan gulp dan gulp akan secara otomatis mencari task yang bernama “default“.
Lalu gulp akan berjalan tapi tidak seperti sebelumnya, gulp gak akan berhenti, gulp bakal tetep running sambil nunggu ada perubahan di file less dan js. Setelah itu kamu bakal bisa editing file less dan js seperti biasa dan gulp akan mengurus untuk kompilasi dan concat mu.
Oke itu tadi contoh sederhana penggunaan gulp, kalau kamu main-main ke npmjs.org dan search gulp maka akan ketemu banyak plugin yang bisa kamu pakai dan kreasikan sesuai kebutuhan. Contoh keren plugin gulp lainnya seperti :
- gulp-git, buat berinteraksi dengan git.
- gulp-image, buat optimasi images, jadi file-file gambar akan di minify supaya lebih kecil ukuran file nya.
- gulp-ftp, buat otomatis upload file ke server ketika menyimpan file,
- gulp-livereload, supaya setiap menyimpan file, browser mu langsung refresh
- tentu saja, gulp-sass, buat kompilasi file sass
Dan masih banyak plugin gulp lainnya yang bisa di kreasikan untuk membuat development menjadi lebih terotomatisasi.
File gulpfile.js diatas bisa dilihat versi komplit nya disini.