Pengolahan aset-aset pada css dan js menentukan aset apa saja yang dibutuhkan website dalam melakukan webload, saat pertama kali website tersebut
di akses. Ini juga yang nantinya akan mempengaruhi konfigurasi aset pada Grunt
4.2. Implementasi Grunt dan Pembahasan
Setelah tahap instalasi selesai dilakukan, selanjutnya melakukan proses konfigurasi grunt ,berikut ini adalah potongan source code dari konfigurasi dari
grunt yang dibuat pada file Gruntfile.js.
Gambar 4.4. Konfigurasi Grunt
Gambar 4.5. konfigurasi hasil kompresi Pada konfigurasi _DEV_PATH berfungsi sebagai request , dimana aset yang
akan dikompres terletak pada folder
’.themesusdfiles’; . Sedangkan
_PUBLIC_PATH merupakan lokasi folder hasil dari kompresi yang sudah PLAGIAT MERUPAKAN TINDAKAN TIDAK TERPUJI
dilakukan. Untuk fungsi CSS_BUILD, CSS_BUILD_MIN, JS_BUILD merupakan hasil dari file yang sudah dikompres.
Gambar 4.6. Konfigurasi Variabel Gambar diatas merupakan konfigurasi dari variable yang terdapat pada aset
css maupun js. Aset-aset tersebut ditentukan berdasarkan hasil inspect elemen dari webload yang dibutuhkan.
Gambar 4.7. Menjalankan Grunt PLAGIAT MERUPAKAN TINDAKAN TIDAK TERPUJI
Grunt yang sudah dijalankan melalui command prompt dengan mengetikkan perintah “grunt” , memberikan hasil secara langsung pada ukuran file cssmin yang
awalnya berukuran 231.99 kb dilakukan kompresi menjadi 184.77 kb Hasil dari kompresi dari Grunt juga dapat dilihat dari website secara langsung
melalui inspect element seperti tabel berikut ini :
Tabel 4.4 . Hasil Perbandingan Perubahan menggunakan Grunt
Sebelum dilakukan kompresi Sesudah dilakukan kompresi
Jumlah request dari css dan js sebanyak 59 request.
Jumlah request dari css dan js sebanyak 40 request.
Jumlah data transfer sebesar 2.1 MB Jumlah data transfer sebesar 1.5 MB
Aset-aset dari css masih belum dikompresi sehingga terdapat banyak
file berupa aset, seperti jquery-ui.css, bootstrap.css, PwdStyles.css
dsb Aset-aset dari css sudah mengalami
kompresi sehingga file berkurang dan
menjadi 1
file kompresi
themes.css PLAGIAT MERUPAKAN TINDAKAN TIDAK TERPUJI
Sebelum dilakukan kompresi Sesudah dilakukan kompresi
Pada aset-aset js juga masih banyak file aset js. Seperti jquery_003.js,
jquery-ui.js, slicker.js, password.js, responsiveslides.js
dsb. Setelah dilakukan kompresi seluruh
aset dikompresi kedalam 1 aset yaitu themes.js
Setelah melakukan penerapan tekonologi kompresi Grunt pada website Perpustakaan Universitas Sanata Dharma, terlihat penurunan bobot paket data dari
aset-aset yang diunduh.
4.3 Penghitungan Manual
