ffCCBot/2.0 (http://commoncrawl.org/faq/)
NEW!! Buku Query MySQL Lihat Detail » x

Membuat Custom jQuery Build – Full Guide

Saat ini jQuery merupakan library javascript yang paling populer, karena kemudahannya dan kelengkapan fitur yang dimiliki. Seiring dengan perkebangannya, semakin banyak fitur yang ditambahkan, yang berdampak pada semakin besarnya ukuran file, hingga lebih dari 240kb untuk versi uncompressed, dan yang versi minified pun ukurannya masih lebih dari 80Kb, hal tersebut sedikit banyak mempengaruhi performa website kita.

Dalam praktek, dari semua fitur yang ada, banyak yang tidak kita perlukan, untuk itu jquery menyediakan fitur “build from source” dengan opsi untuk tidak menyertakan module (fitur) tertentu, sehingga dapat menghasilkan file jQuery yang lebih kecil, yang dampaknya akan mempercepat waktu load website kita. Fitur ini tersedia mulai jQuery versi 1.8.0.

Banyak tutorial untuk melakukan ini namun tidak ada yang benar-benar komprehensif, untuk itu pada tutorial kali ini kita akan membahasnya secara mendalam dan komprehensif, sehingga kita faham apa yang kita lakukan.

1. Persiapan

Pada tutorial kali ini, diasumsikan kita menggunakan sistem operasi windows, dan untuk dapat membuat custom build jQuery, kita memerlukan beberapa tools:

  • Software Node.js (termasuk NPM js)
    Instalasi software Node.js dapat dilakukan dengan mudah, sobat dapat langsung mengunjungi https://nodejs.org/en/ untuk mendownload file instalasinya kemudian install dengan mengikuti wizard yang ada.GirGit
  • Git
    Seperti Node.js, instalasi Git pun dapat dilakukan dengan mudah, file installernya dapat langsung diiunduh di alamat https://git-scm.com/downloads, terdapat beberapa parameter yang perlu diperhatikan (berkaitan dengan tutorial kali ini) ketika melakukan instalasi, untuk lebih jelasnya silakan kunjungi halaman: Cara Install Git Pada Windows
  • Grunt
    Instalasi Grunt juga dapat dilakukan dengan cepat dan mudah, instalasi akan langsung kita bahas di tutorial ini.

Ternyata banyak ya tools yang diperlukan, meskipun banyak sobat tidak perlu khawatir, karena tools tersebut dapat diinstall dengan mudah, sobat tinggal mengikuti installasi wizard nya atau mengikuti tutorialnya.

Setelah kita install npm dan git, langkah selanjutnya adalah kita install Grunt, caranya, buka command promt dan jalankan perintah npm install -g grunt-cli, catatan: proses instalasi memerlukan koneksi internet. 

install_grunt_cli

Gambar 1. Install Grunt CLI

2. Clone jQuery dari Github

Sebelum kita meng-clone source jQuery dari github, kita buat terlebih dahulu folder sebagai tempat penyimpanannya, pada contoh kali ini kita buat folder Git Repository pada drive E (E:Git Repository), selanjutnya buka command promt dan arahkan cursor ke folder tersebut, untuk melakukan cloning, gunakan perintah git clone, contoh seperti gambar berikut ini:

clone_jquery_github

Gambar 2. Clone jQuery Dari Github

proses tersebut akan membentuk folder baru dengan nama jquery yang berlokasi didalam direktori E:Git Repository.

3. Install NPM Kedalam Repository

Selanjutnya kita arahkan cursor ke folder jquery dengan perintah cd jquery dan kita download source npm ke dalamnya dengan perintah npm install. source npm ini cukup besar, hasil ekstrak nya mencapai sekitar 50mb.

install_npm_di_jquery_repo

Gambar 3. Install NPM Ke jQuery Repository

catatan: proses instalasi memerlukan koneksi internet

Langkah selanjutnya kita jalankan perintah grunt. Perintah ini akan membentuk folder dist yang berisi file jquery, file jquery yang terbentuk merupakan versi terbaru, untuk mengeceknya, buka file jquery.js yang ada di folder tersebut.

npm_grunt_jquery

Gambar 4. Menjalankan Perintah Grunt Pada Repository jQuery

4. Backup Repository

Sejauh ini repository jquery sudah siap kita manipulasi, untuk itu ada baiknya kita backup terlebih dahulu apa yang telah kita kerjakan, sehingga jika terjadi sesuatu yang tidak kita inginkan, file tersebut dapat kita kembalikan ke kondisi awal. Untuk melakukan backup, cukup copy folder jquery, dan paste dengan nama tertentu misal: jquery_npm_grunt.

5. Buat custom build jquery

Saatnya kita tiba pada bagian utama tutorial ini yaitu membuat custom build jquery. Seperti disebutkan sebelumnya, jquery menggunakan git sebagai version controlnya, sehingga untuk melakukan manipulasi, kita juga harus menggunakan perintah yang disediakan git, jika sobat tidak familiar dengan git, tidak apa apa, disini kita hanya menggunakan beberapa perintah sederhana saja, seperti checkout, branch dan commit, jika ingin mempelajari perintah tersebut, dapat mengunjungi web attlasian.

Langkah-langkah yang perlu kita lakukan adalah:

  1. Buka branch jquery.
  2. Buat modifikasi pada file jquery.
  3. Buat dan buka branch baru (opsional).
  4. Simpan perubahan (opsional).
  5. Membuat Tag (opsional).

5.1 Buka branch jquery

Untuk membuka branch jquery, kita gunakan perintah git checkout <versi jquery>. Jika kita mengosongkan versi jquery maka yang terbuka adalah versi terakhir termasuk versi alpha/beta, oleh karena itu sebaiknya kita tuliskan versinya sehingga kita benar-benar tahu versi mana yang akan kita manipulasi. Untuk mengetahui list branch/versi jquery yang ada pada repository, kita dapat menggunakan perintah git tag, contoh:

git_tag_jquery

Gambar 5. List Versi jQuery Pada Repository

Pada contoh kali ini kita akan menggunakan versi 2.1.4, kita buka/aktifkan brach tersebut:

git checkout 2.1.4

ketika perintah tersebut dijalankan, maka pada folder dist (jquery/dist) akan terbentuk file jquery versi 2.1.4 seperti tampak pada gambar berikut:

jquery_file_2.1.4

Gambar 6. File jQuery di Repository

untuk mengecek versinya, silakan buka file jquery.js dan lihat bagian atas. Dari gambar diatas terlihat bahwa ukuran file jquery adalah sebesar 242KB dan yang versi minified (jquery.min.js) adalah sebesar 83KB. Sobat dapat bereksperimen dengan mencoba coba versi yang ada.

5.2 Modifikasi file jquery

Selanjutnya, dengan grunt, kita buat file jquery dengan menghilangkan fitur/module yang tidak kita perlukan. Terdapat cukup banyak fitur/module yang dapat kita hilangkan sepert ajax, effect, event, dll, untuk list dan penjelasan lengkapnya dapat dilihat pada halaman dokumen jquery repository.

Untuk menghilangkan module tertentu kita gunakan perintah grunt custom:-<nama module>, misal menghilangkan ajax: grunt custom:-ajax, menghilangkan ajax, effects, dan event: grunt custom:-ajax,-effects,-event, perlu diperhatikan bahwa tidak boleh ada spasi pada penulisan module, sehingga jika kita tulis grunt custom:-ajax, -effects, -event, akan muncul pesan error.

Pada contoh kali ini kita akan menghilangkan module ajax, peritah dan output yang dihasilkan seperti tampak pada gambar berikut:

jquery_custom_noajax

Gambar 7. Membuat jQuery Tanpa Ajax

Proses diatas akan membentuk file jquery pada folder dist. Jika kita buka folder tersebut, maka ukuran file jquery akan berubah seperti tampak pada gambar berikut:

jquery_file_2.1.4_noajax

Gambar 8. File jQuery Pada Folder Dist

Dari gambar diatas terlihat bahwa ukuran file jquery mengecil menjadi 213KB sedangkan yang versi minified mengecil menjadi 74KB, cukup signifikan dibanding sebelumnya.

Kita bebas menjalankan berbagai perintah, misal ketika menjalankan grunt custom:-ajax,-effects,-event, module ajax, effects, dan event akan hilang, kemudian ketika kita jalankan kembali perintah grunt custom:-ajax , module effects dan event yang tadinya hilang akan kembali lagi.

Kita coba lagi dengan menjalankan perintan grunt custom:-ajax,-deprecated,-deferred,-wrap,-offset, hasil yang kita peroleh adalah:

jquery_file_2.1.4_custom

Gabar 9. File jQuery Pada Folder Dist

Sampai dengan saat ini, kita telah selesai membuat custom jquery, file yang terbentuk pada folder jquery/dist sudah dapat kita gunakan. Lebih lanjut jika ingin menyimpan perubahan yang telah kita lakukan, dapat mengikuti bagian berikutnya.

5.3 Buat dan buka branch baru

Sebelum melakukan penyimpanan, kita perlu untuk membuat branch baru, agar hasil modifikasi yang kita lakukan tidak mempengaruhi yang sudah ada, untuk itu perintah yang kita perlukan adalah:

git branch <nama branch baru>
git checkout <nama branch baru>

atau yang lebih singkat:

git checkout -b <nama branch baru>

perintah git branch akan membuat branch baru dan git checkout akan mengaktifkan branch baru tersebut, misal kita buat branch baru dengan nama 2.1.4-ajax, perintah yang kita gunakan:

git checkout -b "2.1.4-ajax"

hasil yang kita peroleh:

git_tambah_branch_baru

Gambar 10. Tambah Branch Baru Pada Git

Jika sebelumnya kita berada di branch 2.1.4, saat ini kita berada di branch 2.1.4-ajax

5.4 Simpan Perubahan

Selanjutnya kita simpan perubahan yang telah kita lakukan, namun sebelum menyimpanya kita perlu mendefinisikan nama dan email kita di file configurasi git, jika tidak, maka git akan memunculkan pesan error. Untuk mendefinisikan email, kita gunakan perintah  git config --global user.email "email@example.com", sedangkan untuk nama, kita gunakan perintah git config --global user.name "Your Name", kedua perintah tersebut dapat kita gabungkan menjadi satu dengan menggunakan tanda &&. Contoh seperti gambar berikut:

git_registe_nama_dan_email

Gambar 11. Register Nama dan Email Pada Git

setelah itu kita simpan branch kita dengan perintah

git add .
git commit -m <messsage>

git add . digunakan untuk menambahkan semua file ke “staging area” dan git commit -m <message> untuk menyimpannya ke dalam branch, postfix-m merupakan kependekan dari --message. Message harus mengikuti aturan tertentu, seperti menggunakan awalan “Merge branch”, jika tidak, maka akan muncul pesan error.

Kedua peritah tersebut diatas dapat digabung menjadi:

git commit -a -m <message>

contoh mari kita simpan perubahan yang telah kita buat dengan perintah:

git commit -a -m "Merge branch 2.1.4-ajax (v2.1.4 with no ajax)"

maka hasil yang kita peroleh adalah sebagai berikut:

git_merge_noajax

Gambar 12. Merge Branch

Penyimpanan branch selesai, untuk memanggil branch tersebut, kita gunakan perintah git checkout 2,1,4-ajax

5.5 Menambahkan Tag

Sebelum mengakhiri tutorial ini, perlu untuk dibahas mengenai tag. seperti pembahasan diatas, kita dapat melihat versi jquery yang ada dengan memanggil perintah git tag, untuk itu agar kita dapat dengan mudah mengingat branch yang kita buat, kita dapat menambahkan tag untuk branch kita, perintah yang kita gunakan adalah:

git tag -a <nama tag> -m <message>

postfix -a pada perintah diatas merupakan kependekan dari --annotate, karena tag diurutkan secara alphanumeric, agar mudah diidentifikasi, kita buat tag dengan nama 2.1.4-ajax, contoh kita jalankan perintah berikut:

git tag -a 2.1.4-ajax -m "v2.1.4 with no ajax"

Jika kita jalankan perintah git tag, maka tag yang kita buat akan muncul bersama dengan tag lain yaitu versi jquery yang ada.

tag_pada_git_dengan_custom_jquery

Gambar 13. Tag Pada Git Dengan Custom jQuery

6. Kesimpulan

Dengan custom jquery build, memungkinkan kita untuk membuat jQuery versi kita sendiri dengan menghilangkan berbagai module/fitur yang tidak kita perlukan seperti ajax, effects, event, dll, sehingga dapat mengurangi ukuran file jQuery, yang dampaknya akan mempercepat kinerja website kita.

Pembuatan custom build jquery memerlukan beberapa tahapan yang awalnya terlihat cukup rumit, namun setelah terbiasa akan terasa mudah, disamping itu sekaligus kita juga dengan mudah belajar mengenai version control dengan software Git.

Demikian pembahasan cara membuat custom build jquery, semoga bermanfaat.

Recomended Post

Silakan tinggalkan komentar

Like Us

Dapatkan update artikel terbaru via E-Mail
  1. Eksklusif Cheat Sheet PHP Bahasa Indonesia – Pendamping Belajar PHP

  2. PHP FORM III: Menampilkan Data MySQL Dengan PHP dan Form HTML

  3. Tutorial PHP Form II: Menampilkan Hasil Input Form HTML dengan PHP

  4. Tutorial PHP Form I: Menghubungkan Form HTML dengan PHP

  5. Menampilkan Data Dari Beberapa Tabel MySQL – JOIN Pada MYSQL

  6. Memahami dan Menampilkan Tanggal dan Waktu Pada PHP

  7. Menghitung Selisih Waktu Dengan PHP – Cara Termudah

  8. Memahami Fungsi Date Pada PHP

  9. Memahami Fungsi Time, Strtotime, dan Mktime Pada PHP – Memanipulasi Waktu

  10. Memahami Zona Waktu (Timezone) dan Selisih Waktu Pada PHP