Concatenate Javascript File dengan Ant Script pada IDE Netbeans

Concatenate Javascript File dengan Ant Script pada IDE Netbeans

Tips penting untuk optimasi website adalah mengurangi jumlah komponen yang ter-load. Yahoo!’s Exceptional Performance team menempatkan tips ini pada urutan pertama, ini artinya memang…

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

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

Pada tutorial ini, saya akan menunjukkan bagaimana cara concatenate javascript file dengan memakai Ant script pada Netbeans. Sebenarnya ini merupakan 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 dari sisi optimasi website.

Berikut adalah IDE dan ant version yang ada pada laptop saya bekerja.
– 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 yang kita lakukan melalui file ini. Dalam Netbeans kita bebas membuat file ini dimana saja, caranya klik kanan pada folder dan pilih bagian “Other -> Ant Build Script

Ant Build Script

Ant Build Script

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

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

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

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 ini 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 list pada tag “filelist”.

jQuery Librari

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

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-file librari jQuery tersebut.

Hasil concat file js

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.

Tag: , , , , ,

Write Comment

Your email will not be published. The marked label is required.