Bayangkan jika anda sekarang bekerja untuk membangun sebuah website besar. Untuk mempermudah penulisan kode, anda menggunakan LESS sebagai preprosesor CSS. Selain itu, website yang dibangun juga menggunakan JavaScript secara intensif, dan efeknya anda menggunakan Closure Compiler untuk optimasi ukuran kode JavaScript. Karena tidak ingin menuliskan HTML yang sama berulang kali, anda juga menggunakan mustache sebagai alat untuk menulis HTML.

Coba hitung berapa langkah yang harus dijalankan untuk mendapatkan hasil akhir website anda.

Bagi sebagian orang, langkah-langkah yang dibutuhkan untuk menghasilkan website dengan berbagai tools di atas adalah:

  1. Lakukan kompilasi LESS.
  2. Copy hasil kompilasi LESS ke folder yang digunakan mustache.
  3. Lakukan kompilasi JavaScript.
  4. Copy hasil kompilasi JavaScript ke folder yang digunakan mustache.
  5. Kompilasi Mustache.
  6. Copy hasil akhir website ke tempat hosting web.

Secara kasar terdapat enam langkah, meskipun mungkin langkah 2 dan 4 bisa digabungkan dengan langkah sebelumnya. Sekilas memang tidak terlalu diperlukan banyak langkah, dan bahkan langkah-langkah yang diperlukan sangat mudah dijalankan. Tetapi pada prakteknya, seringkali kita akan merasa malas melakukan langkah yang sama berkali-kali. Kan komputer digunakan untuk otomasi, harusnya ada cara untuk membuat enam langkah itu otomatis dong! Klik satu tombol saja, semuanya jalan!

Masalah seperti ini sebenarnya sudah merupakan masalah klasik dalam pengembangan software. Pada pembahasan sebelumnya mengenai tools programmer, saya melewatkan tools untuk menyelesaikan masalah ini, jadi mari kita lihat tools ini sekarang. Istilah umum dari tools yang digunakan untuk melakukan otomasi kompilasi dan penggabungan berbagai aset program ini dikenal dengan nama build tools.

Seperti tools untuk refactoring, profiling, dan lainnya, build tools merupakan tools yang spesifik bahasa. Misalnya, pada Scala kita memiliki sbt (scala build tools). Java memiliki ant dan maven. Meskipun terdapat build tools yang dapat digunakan secara generik seperti make, biasanya setiap bahasa membuat tools-nya sendiri karena terdapat banyak intrik-intrik dalam bahasa yang harus diselesaikan secara spesifik.

Contoh Penggunaan Build Tools

Untuk melihat bagaimana menggunakan sebuah build tools, kita akan mencoba melakukan kompilasi terhadap bootstrap, sebuah framework CSS dari twitter. Jika sedikit bingung mengenai kegunaan dari bootstrap, silahkan baca ulasan saya sebelumnya.

Perlu diingat bahwa yang akan kita lakukan hanyalah melakukan kompilasi, belum menyusun langkah-langkah kompilasi. Penyusunan langkah-langkah kompilasi memerlukan pembahasan panjang, yang mungkin akan dilakukan pada tulisan-tulisan slenajutnya. Untuk sekarang, mari mulai dengan menggunakan sistem yang sudah ada terlebih dahulu.

Twitter menggunakan GruntJS sebagai build tools untuk bootstrap. Sebelum mulai melakukan kompilasi, tentunya kita harus melakukan instalasi tools-nya terlebih dahulu. GruntJS berjalan di atas platform NodeJS, jadi langkah pertamanya adalah masuk ke website NodeJS (http://nodejs.org/) kemudian download dan install NodeJS.

Selesai melakukan instalasi NodeJS, jalankan command line anda, dan ketikkan perintah berikut:

npm install -g grunt-cli

Perintah ini akan melakukan instalasi GruntJS secara otomatis, sehingga kita bisa langsung menggunakan GruntJS selesai menjalankan perintah tersebut.

Langkah selanjutnya adalah mengambil kode bootstrap, yang diletakkan pada GitHub. Sebelum mengambil kode, tentunya anda harus memiliki git terlebih dahulu (ebook penggunaan git). Berikut adalah perintah untuk mengambil kode bootstrap:

git clone git@github.com:twbs/bootstrap.git

Jika perintah dijalankan dengan benar, maka sekarang kita telah memiliki sebuah folder bootstrap. Masuk ke dalam folder tersebut untuk melihat file yang digunakan oleh bootstrap.

File Kode Bootstrap

Setelah mendapatkan kode dari bootstrap, yang harus kita lakukan terlebih dahulu adalah masuk ke folder yang barusan dibuat dan menjalankan perintah awal untuk inisialisasi proyek:

cd bootstrap
npm install

Tahapan ini akan memakan waktu yang lama karena perintah npm install akan secara otomatis melakukan download seluruh library, kode, dan segala file yang dibutuhkan oleh bootstrap. Jadi, kalau programnya berjalan sangat lama, ditinggal saja sambil ngopi :D Berikut kira-kira tampilan yang akan dihadapi kalau perintah dijalankan dengan benar:

Downloading...

Selesai melengkapi seluruh kebutuhan untuk kompilasi bootstrap, sekarang kita dapat menjalankan salah satu dari tiga perintah yang ada, yaitu:

  1. grunt dist untuk menjalankan test, kompilasi, sekaligus copy hasil kompilasi ke folder dist.
  2. grunt test untuk menjalankan pengujian seluruh kode bootstrap.
  3. grunt watch, mode yang sama seperti perintah watch pada SASS, memerintahkan grunt untuk memantau folder bootstrap dan melakukan test serta kompilasi secara otomatis jika ada file yang berubah.

Selain ketiga perintah tersebut, sebenarnya masih terdapat satu perintah lagi, grunt yang akan melakukan kompilasi seluruh kode dan dokumentasi, serta menyajikan dokumentasi tersebut pada server lokal. Perintah ini tidak dibahas, karena penyajian dokumentasi memerlukan Jekyll, yang juga memerlukan ruby. Pembahasan mengenai instalasi ruby dan Jekyll akan memerlukan artikel terpisah.

Kembali ke pembahasan awal, dapat dilihat bagaimana grunt mempermudah langkah kompilasi (yang sebenarnya lebih cocok disebut sebagai langkah “persiapan distribusi”) bootstrap. Dengan menggunakan build tools, seluruh pengembang yang ingin berkontribusi pada bootstrap tidak perlu melakukan banyak langkah manual untuk kompilasi, melainkan cukup dengan satu perintah saja.

Akhir Kata

Jika belum menggunakan build tools untuk proyek perangkat lunak anda, segera coba gunakan pada proyek selanjutnya. Penggunaan build tools sangat membantu kita dalam meningkatkan produktifitas, karena langkah-langkah manual dapat dibuat menjadi satu perintah saja.

Seperti biasa, kritik, saran, maupun komentar dapat ditinggalkan di kolom komentar. Thanks!

comments powered by Disqus

Daftar Isi