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.

Kalau kamu subscribe berita-berita web teknologi, kamu pasti tau hari ini adalah hari dimana google chrome mengadakan event Chrome Dev Summit.

(lebih…)

Beberapa tahun belakangan teknologi javascript makin beragam dan semakin luas penggunaannya bukan cuma dalam pengembangan website atau sekedar pemanis tampilan.

Ada NodeJS dengan NPM nya bener-bener membantu web developer untuk mencari library, framework atau sekedar tools untuk pengembangan web, rasanya mau kebutuhan apapun ada versi JS nya yang siap digunakan. Bahkan disini kamu bisa lihat ada package JS buat install linux.

https://twitter.com/sadserver/status/642111917163724800

Saya sendiri setelah menggunakan PHP sepanjang masa kerja, sudah sampai di titik dimana rasanya sudah “cukup”, Laravel dan WordPress sudah cukup untuk berbagai macam kebutuhan dan semuanya sudah serba gampang.

Saat ini saya lagi dalam masa “belajar-js-lebih-detail” setelah beberapa kesempatan menggunakan beberapa framework library seperti AngularJS baik untuk standalone app, atau pun dengan menggunakan tools lain seperti IonicJS  untuk keperluan pembuatan aplikasi mobile sederhana, saat ini juga lagi in progress pengenalan dengan meteorJs, framework JS yang menarik menurut saya, karena sifatnya fullstack JS, full Javascript dari sisi server dan client.

Untuk itu, saya ngumpulin beberapa link penting yang dibutuhkan untuk mengenal lebih dalam trend JS saat ini. Link-link berikut adalah link menuju beberapa repository yang ada Github yang penting banget buat di watch. Kelebihan dari repository yang ada di list ini adalah sering di update, baik penambahan konten atau pun diperbaiki oleh banyak orang. Jadi harusnya sih lebih update dan terjamin.

Awesome Javascript

Pertama rasanya penting untuk bookmark atau set “watching” github repo satu ini, ada banyak tools lengkap disini mulai dari Package manager, UI development, testing dan lain-lain.

Airbnb Javascript Style Guide

Repository dari airbnb ini bagus banget buat kamu yang mau koding Javascript secara lebih profesional. Mereka ngebuat atau lebih tepatnya mengkoleksi tips dan “rule” gimana sih nulis Javascript Code yang baik dan rapi. Kontributor repository nya juga banyak jadi ini bukan sekedar styleguide Airbnb saja.

AngularJS Style Guide

Sama, ini juga style guide, alias panduan menulis yang baik dan rapi, khusus untuk AngularJs. Gak ada alasan pasti sih kenapa mesti ngikutin repository dari orang ini, tapi list nya sangat lengkap dan ada banyak kontributor nya jadi ya mestinya gak sembarangan

Essentials Javascript Links

Ini hampir sama sih dengan awesome javascript di atas, bedanya ini di kelola oleh Eric Elliott, penulis buku-buku javascript dan salah satu orang keren di dunia Javascript. Di repository ini juga ada banyak referensi buku-buku javascript.

Gitbook Javascript

Ini semacam ebook untuk belajar javascript dari Gitbook yang bisa di baca online dan gratis. Pembahasannya dasar-dasar pemrograman javascript, macam variabel, loop, condition, function, object, pokoknya lebih kearah level programmer pemula.

You Don’t Know JS

Kalau ini kumpulan serial ebook dari getify. Saat ini sih ada 5 ebook yang bisa di baca secara gratis via online. Level bacaannya juga sudah level mediocore jadi kalau belum terbiasa dengan istilah-istilah di javascript bakal sedikit bingung.

Bonus : jstherightway

Ini bukan di github sih, tapi bagus juga ini koleksi link dan tutorial nya buat yang pengen lebih banyak referensi bacaan seputar javascript. Di koleksi ini juga terdapat koleksi podcast, ada juga orang-orang yang “harus” kamu follow di dunia javascript.

Bonus : Javascript.com

Bonus lagi, rasanya gak lengkap aja kalau bahas referensi belajar Javascript tanpa membawa web ini,  disini kamu bakal belajar Javascript secara interaktif langsung di browser, dan juga ada newsletter yang berisi berita, tips, tutorial seputar Javascript yang sangat update sekali. Sayang banget kalau ketinggalan info disini.

Pastinya ada lebih banyak lagi link referensi belajar javascript dari google, seperti codecademy ataupun website elearning lainnya, jadi rasanya gak akan kehabisan bahan untuk di pelajari. Tinggal nunggu produk nya saja 🙂