Menggabungkan banyak file script dengan Ant

Tips penting untuk optimasi website adalah mengurangi jumlah komponen yang ter-load. Yahoo!’s Exceptional Performance team menempatkan tip ini pada urutan pertama, ini artinya mengurangi jumlah komponen-komponen yang ter-load seperti image, style dan script file akan dapat mempercepat waktu load secara nyata pada halaman web. Beberapa artikel berkenaan optimasi pernah saya tulis, diantaranya:

• Optimasi Web menggunakan Yslow
• Plugin wordpress: Optimasi Web dengan W3 Total Cache
• Plugin wordpress: Optimasi Image Upload dengan Smush.It

Masih terkait dengan optimasi website, artikel ini akan menjelaskan bagaimana kita dapat menggabungkan beberapa file javascript menjadi satu file javascript, istilah teknisnya adalah concatenate file. Kita bisa saja melakukannya secara manual dengan satu persatu isi file kita pindahkan. Untuk dua atau tiga file mungkin cara ini dapat dilakukan, tapi dengan jumlah file lebih dari itu, tentu cara ini akan sangat merepotkan.

Pada tutorial ini, saya akan tunjukkan bagaimana cara concatenate javascript file dengan memakai Ant script pada Netbeans. Sebenarnya ini pengalaman yang saya dapati kemaren. Saya mendapatkan sebuah theme wordpress yang harus saya pakai, namun setelah saya pelajari ternyata theme ini meload belasan librari jQuery pada setiap page wordpress. Hal ini tentunya merupakan permasalahan untuk optimasi website yang saya kerjakan.

Berikut adalah IDE dan ant version yang saya gunakan:

• NetBeans 7.0 untuk PHP Project 
• Ant version 1.12.1

STEP 1. BUAT BUILD.XML

File konfigurasi yang akan dibaca oleh ant berbentuk xml. File ini bernama build.xml. Semua konfigurasi dan task terdapat pada file ini. Di Netbeans kita bebas membuat file ini dimana saja, caranya klik kanan pada folder dan pilih bagian "Other -> Ant Build Script"

Ant Build Script

Pada PHP project(Netbeans 7.0) yang saya pakai, pilihan menu "Other -> Ant Build Script" tidak dapat saya temukan, tapi jangan khawatir kita masih bisa membuatnya dengan memilih file "XML -> XML Document".

XML Document

File xml dengan cara ini tidak akan dikenali sebagai file konfigurasi ant, dia akan dikenali sebagai file xml biasa. Trik agar dikenal sebagai file ant adalah dengan mengubah namanya menjadi build.ant. Kemudian iconnya harusnya akan berubah seperti ini.

Ant File Konfigurasi

Root tag dan atribut dari file xml ini adalah "project" dengan beberapa atribut yang dapat anda lihat pada gambar berikut ini:

Ant Project File

Disini terlihat beberapa properti yang saya definisikan. Properti root didefinisikan sebagai tempat dimana file konfigurasi ini berada(build.xml). Kemudian src merupakan folder dimana file-file sumber berada dan build folder dimana hasilnya akan disimpan.

STEP 2. BUAT ANT TARGET "CONCATENATE"

Pada dasarnya file konfigurasi ant ini terdiri dari beberapa properti dan task yang kita berikan padanya. Dalam kasus ini, kita akan membuat sebuah task yang akan menggabungkan file-file javascript yang kita berikan padanya. Berikut adalah script lengkap mengenai task ini:

<project name="Concat file javascript" default="default" basedir=".">
  <description>
        Concatenate javascript file
  </description>
  <property name="root" location="." />
  <property name="src" location="${root}" />
  <property name="build" location="${root}/concat" />
  <target name="concatenate-js-file">
    <concat destfile="${build}/jquery-lib-concat.js" encoding="UTF-8" fixlastline="yes">
      <filelist dir="${src}"
        files= "jquery.prettyPhoto.js,
        jquery.tools.min.js,
        jquery.easing.1.3.js,
        jquery.cycle.all.min.js,
        jquery.nivo.slider.pack.js,
        jquery.anythingslider-min.js,
        jquery.anythingslider.fx-min.js,
        jquery.anythingslider.video.min.js,
        jquery.isotope.min.js,
        jquery.ba-bbq-min.js,
        jquery-ui-1.8.20.custom.min.js,
        jquery.bxSlider.min.js,
        jquery.li-scroller.1.0.js,"
      >
      </filelist>
    </concat>
  </target>
  <target name="minify-js-file"></target>
</project>

Atribut name pada tag target merupakan nama dari sebuah task yang kita definisikan. File hasil dari concatenate akan diletakkan pada file jquery-lib-concat.js, sedangkan file-file sumber di daftar pada tag filelist.

jQuery Librari

STEP 3. RUN ANT TASK "CONCATENATE"

Semua task atau target yang kita buat, akan tampak pada Navigator yang tampak pada window sebelah kiri IDE. Shortcut untuk menampilkan window ini adalah Ctrl+7

Ant Target Concatenate

Klik kanan pada target "concatenate", pilih "run target" dan kemudian kita akan mendapatkan satu file bernama jquery-lib-concat.js sebagai hasil concatenate file librari jQuery tersebut.

Hasil concat file js

PENUTUP

Saya belum terlalu banyak mempelajari build.xml ant tool, script konfigurasi dalam artikel ini masih sangat sederhana. Belum ada pengecekan apakah dua file bisa digabung atau tidak. Ini penting untuk diketahui developer, sebuah file js akan aman di concat jika file itu menggunakan anonymous function sebagai wrapper kode dari akses luar. Ini dimaksudkan agar kode terhindar dari konflik dan pengaksesan yang tidak semestinya. Semua file-file librari diatas pastinya menggunakan hal ini.

Sebenarnya ada banyak hal yang dapat kita lakukan dengan memahami ant task. Kita dapat membuat beberapa task yang mungkin akan sangat memudahkan kita dalam development project, misalnya minify script, backup file, synchro, debugging, dll.