Afief Yona Ramadhana

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.

module.exports = function(grunt) {

  // Project Configuration
  grunt.initConfig({
  	pkg: grunt.file.readJSON('package.json'),
  	concat: {
  		options: {
  			separator: ';'
  		},
  		dist: {
  			src: ['js/*.js'],
  			dest: 'build/<%= pkg.name %>.js'
  		}
  	},
  	uglify: {
  		build: {
  			src: 'build/<%= pkg.name %>.js',
  			dest: 'build/<%= pkg.name %>.min.js'
  		},
  	}
  });

  // Load the plugin that provides the "uglify" task
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-uglify');

  // Default task(s)
  grunt.registerTask('default', ['concat', 'uglify']);

};

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

{
  "name": "vlp-js",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.5",
    "grunt-contrib-concat": "^0.5.1",
    "grunt-contrib-uglify": "~0.5.0"
  }
}

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

concat: {
	options: {
		separator: ';'
	},
	dist: {
		src: ['js/*.js'],
		dest: 'build/<%= pkg.name %>.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`.

uglify: {
	build: {
		src: 'build/<%= pkg.name %>.js',
		dest: 'build/<%= pkg.name %>.min.js'
	},
}

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`.

grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');

grunt.registerTask('default', ['concat', 'uglify']);

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 install`

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

Selesai. 🙂