30 Sep 2015

Mencoba Grunt : The Javascript Task Runner

Bertahun – tahun berinteraksi dengan Javascript, akhirnya kemarin gue coba Grunt. Awalnya gue skeptis, namun setelah melihat banyaknya repository projek-projek bermaanfaat di Github yang menggunakan Grunt, gue luluh. Ada dua hal yang gue butuhkan dari grunt. Concatenation & Minification.

Tujuan utama dari Grunt adalah automation. Sama seperti tujuan dasar programming, to automate processes. Sebelum menggunakan Grunt, gue menggabungkan beberapa file javascript secara manual, lalu mengkompresinya melalui http://jscompress.com/. Gue melalukan hal itu karna dulu gue pikir proses itu hanya dilakukan pada tahap selesai development. Proses manual yang cukup panjang itu tidak begitu terasa karna hanya dilakukan sekali, ketika upload ke server publik. Tapi nyatanya, revisi tetap membutuhkan update. Dan gue harus melakukan proses itu ketika ada update ke server.

Dengan Grunt, gue bisa mengautomasi penggabungan beberapa file javascript kemudian mengkompresi ukurannya sehingga ready untuk distribusi. Yang dibutuhkan oleh grunt, hanyalah file package.json dan gruntfile.js. Mendefinisikan dua file tersebut memang cukup memakan waktu. Tapi proses tersebut hanya dilakukan sekali. Selanjutnya, otomatis!

Untuk mempermudah proses development. Gue membuat template untuk concatenation minification. Template ini bisa digunakan untuk projek lain, hanya perlu mengganti beberapa parameter pada gruntfile.js.

Di dalam grunt.initConfig, gue mendefinisikan parameter pkg, parameter ini berisi objek yang diambil dari file package.json. Di dalam file package.json berisi

Selanjutnya, gue coba paparkan penjelasan beberapa baris kode pada gruntfile.js.

Parameter concat berisi konfigurasi untuk menggabungkan beberapa file. Didalamnya terdapat parameter options, lalu separator. separator berisi string pemisah antar file ketika disatukan. Gue mengisi ; agar tidak terjadi error kalau ternyata pada baris terakhir setiap file ada yang tidak diberi titik koma. Lalu terdapat parameter dist yang maksudnya adalah ‘distribusi’ berisi src dan dest. src merujuk pada file-file yang akan digunakan. Pada contoh diatas gue menggunakan asterik untuk menyeleksi semua file .js pada folder js. dest merujuk pada nama file gabungan dari setiap javascript tersebut. <%= pkg.name %> akan merujuk pada nama projek yang didefinisikan pada file package.json.

Selanjutnya, uglify. Cara kerjanya adalah menghapus newline  pada file dan membuat beberapa nama variabel menjadi lebih pendek. Dengan begitu, ukuran file javascript pun akan menjadi lebih kecil. Pada parameter ini, kita mengatur sumber file pada parameter src. Dan nama file setelah diminifikasi pada parameter dest.

Baris kode diatas berguna untuk me-load plugin yang akan digunakan, lalu menggunakannya pada fungsi registerTask.

Sebelum menjalankan grunt, jangan lupa install semua dependensinya dengan perintah npm installCapture

Jalankan grunt, dan cek folder build. Akan ada dua file. File hasil gabungan, dan file gabungan yang sudah diminifikasi.

Capture2Selesai. 🙂

Tinggalkan Komentar?

Your email address will not be published.

*