Gulp adalah sebuah program utilitas untuk otomatisasi pemrosesan file. Program ini bisa kita pake untuk minifikasi skrip (dengan plugin), kopi file dari satu tempat ke tempat lain, dan sebagainya. Kalo Anda pake Mac, program ini mirip dengan Automator, jadi bisa disebut juga task runner karena fungsi utamanya jalanin task.
Dari titel di websitenya,
Gulp: “The streaming build system”
Jadi, apa itu stream?
Kalo kita baca-baca di Wikipedia, istilah file stream banyak disebut dalam artikel yang ada kaitannya dengan I/O (input/output). Sederhananya, file stream adalah sederetan data, representasi sebuah file, yang bisa kita baca, modifikasi, & simpan dalam bentuk file lagi. File stream dibuat di memori pada waktu kita buka sebuah file. Modifikasi sebuah stream terjadi sangat cepat karena dilakukan saat data masih ada di memori sebelum disimpan kembali dalam bentuk file. Karena itulah, dibanding task runner lain seperti Grunt, Gulp lebih cepat dalam memodifikasi file.
Instalasi
Karena Gulp adalah program untuk NodeJS. Tentu step pertama adalah instal Node. Proses instalasinya di luar konteks tutorial ini, jadi silakan Anda coba sendiri.
Setelah kita instal Node, kita instal gulp
pake NPM (Node Package Manager). Perintahnya begini:
npm install gulp
Terus pastikan gulp
ada di system path.
Berikutnya, silakan baca-baca sedikit tentang Gulp API. Dari API yang ada di dokumentasinya, berikut ini yang paling sering kita pake.
gulp.task()
: bikin taskgulp.src()
: baca file/folder & bikin streamgulp.dest()
: simpen stream sebagai filepipe()
: kirim stream dari satu proses ke proses lain
Bikin Task
Seperti saya bilang di atas, Gulp adalah task runner jadi inti dari Gulp adalah task. Task yang ingin kita jalanin kita tulis dalam file yang disebut gulpfile
. Jadi sekarang kita bikin file gulpfile.js
yang kita isi dengan kode JavaScript.
var gulp = require('gulp');
gulp.task('hello',function(){
console.log('hello gulp!');
})
Jalanin gulp di terminal.
gulp hello
Outputnya:
[gulp] Using gulpfile /Users/boss/Desktop/gulp_tut/demo/gulpfile.js
[gulp] Starting 'hello'...
hello gulp!
[gulp] Finished 'hello' after 80 μs
Secara default, Gulp jalanin task yang ada dalam file bernama gulpfile.js
. Tapi kita bisa bikin file dengan nama lain, misalnya mybuildscript.js
& kalo kita pake file ini, perintahnya jadi begini,
gulp --gulpfile mybuildscript.js hello
Kita coba bikin task untuk kopi file.
gulp.task('copy',function(){
//buka file myfile.txt
gulp.src('myfile.txt')
//terusin (pipe) stream untuk disimpan di folder sub
.pipe(gulp.dest('sub'));
})
Bikin dulu file myfile.txt
terus jalanin gulp copy
di terminal.
Output:
[gulp] Using gulpfile /Users/boss/Desktop/gulp_tut/demo/gulpfile.js
[gulp] Starting 'copy'...
[gulp] Finished 'copy' after 12 ms
Hasilnya
Task Dependency
Sebuah task bisa bergantung pada eksekusi task lain (dependency). Sintaksnya
gulp.task('namatask',['namatasklainyangharusdijalaninjuga'],function(){
//proses
})
Coba kita bikin task copy
bergantung pada task hello
.
gulp.task('hello',function(){
console.log('hello gulp! mulai ');
})
//utk jalanin copy, hello juga harus dijalanin
gulp.task('copy',['hello'],function(){
//buka file myfile.txt
gulp.src('myfile.txt')
//terusin (pipe) untuk dikopi
.pipe(gulp.dest('sub'));
})
//untuk jalanin default, copy juga harus dijalanin
gulp.task('default',['copy'])
Jalanin task default
.
gulp
Untuk jalanin task
default
kita ga perlu kasih nama task sebagai argumen karena kalo ada taskdefault
di dalam gulpfile & kita jalanin gulp tanpa argumen, gulp otomatis pilih task itu.
Output di terminal:
[gulp] Using gulpfile /Users/boss/Desktop/gulp_tut/demo/gulpfile.js
[gulp] Starting 'hello'...
hello gulp!
[gulp] Finished 'hello' after 81 μs
[gulp] Starting 'copy'...
[gulp] Finished 'copy' after 15 ms
[gulp] Starting 'default'...
[gulp] Finished 'default' after 11 μs
Task hello
, copy
, & default
dijalanin hampir bersamaan. copy
ga nunggu hello
selesai, default
juga ga nunggu copy
selesai. Buktinya begini, kita bikin task hello
selesai dalam 2 detik.
gulp.task('hello',function(){
console.log('hello gulp! mulai ');
setTimeout(function(){
console.log('hello gulp! selesai' );
},2000);
})
Output di terminal:
[gulp] Using gulpfile /Users/boss/Desktop/gulp_tut/demo/gulpfile.js
[gulp] Starting 'hello'...
hello gulp! mulai
[gulp] Finished 'hello' after 444 μs
[gulp] Starting 'copy'...
[gulp] Finished 'copy' after 14 ms
[gulp] Starting 'default'...
[gulp] Finished 'default' after 7.41 μs
hello gulp! selesai
Kita liat hello
baru selesai setelah default
selesai padahal task ini mulai dijalanin sebelum copy
.
Jalanin task secara asinkron (berurutan)
Task dijalanin paralel kecuali kita pake callback , kirim stream sebagai nilai balik dari task atau pake promise.
Apa itu Promise? Promise adalah proses yang ditunda (deferred) & kita pake sebagai pengganti callback kalo kita ingin jalanin beberapa proses secara berurutan, satu proses setelah proses sebelumnya selesai. Untuk lebih jelasnya silakan baca penjelasan Promise di MDN
Di sini kita pake promise yang disediain library bernama Q. Untuk instal Q, kita pake perintah yang sama dengan perintah untuk instal Gulp. Hanya beda nama paketnya aja.
npm install q
Kita coba buat 4 task yang harus dijalanin secara berurutan. Jadi kurang lebih begini:
task1->task2->task3->default
Bikin 4 task baru di gulpfile.js
.
//pake callback
gulp.task('task1',function(cb){
gulp.src('myfile.txt')
.pipe(gulp.dest('sub'));
setTimeout(function(){
console.log('task1 selesai')
cb();
},2000);
})
//task2 bergantung task1 (dependency)
gulp.task('task2',['task1'],function(){
//pake return stream
var stream = gulp.src('myfile.txt')
.pipe(gulp.dest('sub2'));
console.log('task2 selesai');
return stream;
})
//task3 bergantung task2
gulp.task('task3',['task2'],function(){
//pake promise
var Q = require('q');
var d = Q.defer();
setTimeout(function(){
console.log('task3 selesai')
d.resolve();
},1000);
return d.promise;
})
gulp.task('default',['task3'])
Jalanin gulp
. Output di terminal:
[gulp] Using gulpfile /Users/boss/Desktop/gulp_tut/demo/gulpfile.js
[gulp] Starting 'task1'...
task1 selesai
[gulp] Finished 'task1' after 2.01 s
[gulp] Starting 'task2'...
task2 selesai
[gulp] Finished 'task2' after 6.33 ms
[gulp] Starting 'task3'...
task3 selesai
[gulp] Finished 'task3' after 1 s
[gulp] Starting 'default'...
[gulp] Finished 'default' after 14 μs
Kita liat task2
nunggu task1
selesai, task3
nunggu task2
selesai, dan seterusnya.
gulp-watch
Selain beberapa API yang kita coba di atas, ada lagi satu API yang berguna untuk otomatis jalanin task kalo ada perubahan isi file / direktori. Namanya watch
.
Kita bikin direktori bernama sub3
, bikin file file1.txt
, terus bikin task.
gulp.task('watchsub3',function(){
gulp.watch('sub3/*/*',function(event){
console.log(event.path+' ' + event.type);
})
})
sub3/**/*
artinya semua file yang ada disub3
& subdirektorinya. Kalosub3/*
artinya semua file yang ada disub3
, nggak termasuk yang ada di subdirektori.
Jalanin task, gulp watchsub3
Sekarang coba hapus file.txt
. Perhatiin status di terminal.
[gulp] Using gulpfile /Users/boss/Desktop/gulp_tut/demo/gulpfile.js
[gulp] Starting 'watchsub3'...
[gulp] Finished 'watchsub3' after 7.26 ms
/Users/boss/Desktop/gulp_tut/demo/sub3/file1.txt deleted
Bikin file baru, file2.txt
.
/Users/boss/Desktop/gulp_tut/demo/sub3/file2.txt added
Ubah isi file2.txt
.
/Users/boss/Desktop/gulp_tut/demo/sub3/file2.txt changed
Supaya
watch
bisa jalan, isi direktori targetnya ga boleh kosong waktutask
dijalanin.
watchsub3
terus jalan sampai kita matiin pake Ctrl+C
(Linux/OSX) atau Ctrl+D
(Windows).
Kalo cuman pake contoh sederhana di atas, nggak asik kan… 😉 Jadi sekarang kita coba pake Gulp untuk otomatisasi proyek website. Dalam contoh berikutnya kita coba jalanin beberapa task yang umum dibutuhin dalam pembuatan website:
- minifikasi/optimasi asset: JS, CSS, HTML, & gambar
- simpan hasil minifikasi di direktori khusus yang terpisah dari source code
Bukan berarti Gulp hanya cocok untuk proyek web lho … dia bisa dipake untuk segala macem keperluan yang butuh otomatisasi. Pokoknya mirip Automator di OSX lah.
Otomatisasi Proyek Web
Kita buat dulu direktori untuk proyek, kasih nama myweb
. Terus bikin subdirektori src
& di dalamnya kita bikin subdirektori untuk file JS, CSS, & HTML. Tambahin juga satu atau dua gambar. Bikin lagi satu subdirektori, kasih nama public_html
, tempat kita simpan hasil minikasi. Kita bikin juga file gulpfile.js
di direktori myweb
. Jadi kurang lebih struktur direktorinya begini:

Direktori Proyek
Task 1 : Minifikasi JS
Untuk minifikasi JS, kita perlu pake plugin yang namanya gulp-uglify. Kita instal dulu.
npm install gulp-uglify
Terus kita bikin tasknya.
var gulp = require('gulp');
var DEST = 'public_html';
//task 1
var uglify = require('gulp-uglify')
gulp.task('minifyjs',function(){
return gulp.src('src/js/*')
.pipe(uglify())
.pipe(gulp.dest(DEST+'/js'));
});
Buka file index.js
& tulis kode berikut:
(function(){
console.log('index.js');
})();
Coba jalanin: gulp minifyjs
.
Hasilnya, file src/js/index.js
diminifikasi & hasilnya ada di public_html/js/index.js
.
Task 2 : Minifikasi CSS
Instal gulp-minify-css.
npm install gulp-minify-css
Buat task minifycss
.
//task 2
var minifyCSS = require('gulp-minify-css');
gulp.task('minifycss',function(){
return gulp.src('src/css/*')
.pipe(minifyCSS())
.pipe(gulp.dest(DEST+'/css'));
})
Buka file index.css
& tulis kode berikut:
body{
padding:0;
margin:0;
}
Jalanin task gulp minifycss
.
Hasilnya:
Task 3 : Minifikasi HTML
Instal plugin gulp-minify-html.
npm install gulp-minify-html
Bikin tasknya.
var minifyHTML = require('gulp-minify-html');
gulp.task('minifyhtml',function(){
return gulp.src('src/*.html')
.pipe(minifyHTML())
.pipe(gulp.dest(DEST));
})
Buka file index.html
& isi dengan kode berikut:
<html>
<head>
<title>My Awesome Web</title>
</head>
<body>
</body>
</html>
Hasilnya:
Task 4 : Optimasi Gambar
Instal gulp-image.
npm install gulp-image
Plugin ini agak besar, jadi instalnya lumayan lama. Bisa ditinggal ngopi dulu lah …
Kalo udah selesai, bikin tasknya.
var optimizeImg = require('gulp-image');
gulp.task('optimage',function(){
return gulp.src('src/images/*')
.pipe(optimizeImg())
.pipe(gulp.dest(DEST+'/images'));
})
Terus jalanin gulp optimage
Hasilnya (di komputer saya):
[gulp] Using gulpfile /Users/boss/Desktop/gulp_tut/demo/myweb/gulpfile.js
[gulp] Starting 'optimage'...
[21:31:15] - image-1.jpg -> Can't improve upon 39.37 kB
[21:31:16] ✔ image-2.png -> before=6.07 kB after=3.01 kB reduced=3.06 kB(50.4%)
[gulp] Finished 'optimage' after 4.09 s

Optimized Images
Task Default : Otomatisasi Task 1 – 4
Kalo jalanin task satu-satu setiap kali kita bikin file baru atau modifikasi file ya ga asoy …
Kita bikin beberapa watcher
untuk masing-masing tipe file.
gulp.task('watchjs',function(){
//jalanin task minifyjs kalo isi src/js/
//atau file di dalamnya berubah
gulp.watch('src/js/*',['minifyjs'])
});
gulp.task('watchcss',function(){
gulp.watch('src/css/*',['minifycss'])
});
gulp.task('watchhtml',function(){
gulp.watch('src/*.html',['minifyhtml'])
});
gulp.task('watchimg',function(){
gulp.watch('src/images/*',['optimage'])
});
Jalanin semua task di atas dalam task default
.
gulp.task('default',['watchjs','watchcss','watchhtml','watchimg']);
Terus jalanin gulp
.
Output di terminal:
[gulp] Using gulpfile /Users/boss/Desktop/gulp_tut/demo/myweb/gulpfile.js
[gulp] Starting 'watchjs'...
[gulp] Finished 'watchjs' after 6.79 ms
[gulp] Starting 'watchcss'...
[gulp] Finished 'watchcss' after 1.47 ms
[gulp] Starting 'watchhtml'...
[gulp] Finished 'watchhtml' after 889 μs
[gulp] Starting 'watchimg'...
[gulp] Finished 'watchimg' after 914 μs
[gulp] Starting 'default'...
[gulp] Finished 'default' after 7.01 μs
Semua watcher
di atas jalan terus sampai kita terminasi pake Ctrl+C
atau Ctrl+D
.
Coba kita edit file index.js
.
(function(){
var name = 'index.js';
console.log(name);
console.log('hello');
})();
Pas kita simpan file ini, di terminal kita lihat minifyjs
otomatis dijalanin lagi (setelah default
di atas).
[gulp] Starting 'minifyjs'...
[gulp] Finished 'minifyjs' after 8.2 ms
Dan isi public_html/js/index.js
juga berubah.
Coba bikin file baru, src/js/app.js
. Task minifyjs
dijalanin lagi & ada file baru public_html/js/app.js
.
Coba lagi, edit file src/css/index.css
.
body{
padding:0;
margin:0;
background: black;
}
Kalo file ini kita simpan, task minifycss
dijalanin lagi.
Silakan coba sendiri task yang lain.
Misalnya, kita ingin kirim file proyek ke klien dalam bentuk Zip. Kita bikin task baru, pake plugin gulp-zip.
Setelah plugin kita instal, kita bikin tasknya.
var zip = require('gulp-zip');
gulp.task('zip',function(){
return gulp.src(DEST+'/**/*')
.pipe(zip('myweb.zip'))
.pipe(gulp.dest('.'));
});
gulp.task('autozip',function(){
gulp.watch(DEST+'/**/*',['zip']);
})
gulp.task('default',['watchjs','watchcss','watchhtml','watchimg','autozip']);
Matiin task default
, terus jalanin lagi.
Sekarang setiap kali kita ada file baru atau ada file yang diupdate di direktori public_html
atau subdirektorinya, gulp akan membuat file myweb.zip
yang isinya sama dengan isi public_html
. Mantaf kan? 🙂

MyWeb Zipped
gulpfile.js
lengkapnya:
var gulp = require('gulp'); var DEST = 'public_html'; //task 1 var uglify = require('gulp-uglify') gulp.task('minifyjs',function(){ return gulp.src('src/js/*') .pipe(uglify()) .pipe(gulp.dest(DEST+'/js')); }); //task 2 var minifyCSS = require('gulp-minify-css'); gulp.task('minifycss',function(){ return gulp.src('src/css/*') .pipe(minifyCSS()) .pipe(gulp.dest(DEST+'/css')); }) //task 3 var minifyHTML = require('gulp-minify-html'); gulp.task('minifyhtml',function(){ return gulp.src('src/*.html') .pipe(minifyHTML()) .pipe(gulp.dest(DEST)); }) //task 4 var optimizeImg = require('gulp-image'); gulp.task('optimage',function(){ return gulp.src('src/images/*') .pipe(optimizeImg()) .pipe(gulp.dest(DEST+'/images')); }) gulp.task('watchjs',function(){ gulp.watch('src/js/*',['minifyjs']); }); gulp.task('watchcss',function(){ gulp.watch('src/css/*',['minifycss']); }); gulp.task('watchhtml',function(){ gulp.watch('src/*',['minifyhtml']); }); gulp.task('watchimg',function(){ gulp.watch('src/images/*',['optimage']); }); var zip = require('gulp-zip'); gulp.task('zip',function(){ return gulp.src(DEST+'/**/*') .pipe(zip('myweb.zip')) .pipe(gulp.dest('.')); }); gulp.task('autozip',function(){ gulp.watch(DEST+'/**/*',['zip']); }) gulp.task('default',['watchjs','watchcss','watchhtml','watchimg','autozip']);
Segini aja tutorialnya. Silakan coba-coba sendiri. Kalo ada pertanyaan, silakan tanya saya atau Om Google. Daftar plugin yang bisa Anda pake bisa diliat di NPM.
Also in this category ...
- » Flexbox
- » Mengenal Hook di ReactJS
- » Rust 101: Hello Rust
- » JS : Pemrograman Asinkron
- » End-to-end Testing dengan The Intern