Kajian teknologi web Aset Grunt pada website Perpustakaan Universitas Sanata Dharma.

Abstrak

Minat para konsumen pada layanan internet semakin meningkat untuk berbagi informasi. Ada banyak instansi yang membuat sebuah layanan yang memberikan informasi untuk para konsumen atau penggunanya. Dalam hal ini instansi-instansi tersebut membuat layanan sarana dan prasarana untuk memberikan informasi berupa Official Website. Salah satu instansi yang memiliki official website adalah instansi pendidikan seperti Universitas Sanata Dharma Yogyakarta, yang memiliki official website Perpustakan Universitas Sanata Dharma. (www.library.usd.ac.id)

Pihak universitas harus memperhatikan performa dari website Perpustakaan Sanata Dharma, salah satu nya adalah Webload Performance, dimana proses ini terjadi pada saat pertama kali website diakses dan membuka halaman home dari website tersebut. Hal yang mempengaruhi adalah jumlah web aset. Untuk dapat meningkatkan performa dari webload, maka perlu menerapkan teknologi kompresi web aset yaitu Grunt. Dimana sistem kerja dari Grunt adalah melakukan kompresi pada web aset Javascript dan CSS.

Abstract

The interest of consumers on internet services increased to share information. There are many agencies that create a service that provides information to consumers or users. In this case the agencies to make the service infrastructure to provide information in the form of Official Website. One of the agencies that have official website is educational institutions like the University of Sanata Dharma Yogyakarta, which has the official website of Sanata Dharma University Library (library.usd.ac.id).

The university must pay attention to the performance of Sanata Dharma Library website, one of them is webload Performance. Where this process occurs during the first website accessible and open the home page of the website. Things that influence is the number of web assets. In order to improve the performance of webload, it is necessary to apply a compression technology that is Grunt web assets. Where the working system of Grunt is doing on the web assets compression Javascript and CSS

i

KAJIAN TEKNOLOGI WEB ASET GRUNT

PADA WEBSITE

PERPUSTAKAAN UNIVERSITAS SANATA DHARMA

Skripsi

Diajukan Untuk Memenuhi Salah Satu Syarat Memperoleh Gelar Sarjana Komputer

Program Studi Teknik Informatika

Oleh:

NICODIMUS DWIYANTO RAHMAHADI 095314065

.

PROGRAM STUDI TEKNIK INFORMATIKA FAKULTAS SAINS DAN TEKNOLOGI

UNIVERSITAS SANATA DHARMA YOGYAKARTA

i

WEB TECHNOLOGY REVIEW ASSETS GRUNT

ON WEBSITE

LIBRARY of SANATA DHARMA UNIVERSITY

THESIS

Presented as Partial Fulfillment of the Requirements to Obtain Sarjana Computer Degree

in Informatic Engineering Department

Created By :

NICODIMUS DWIYANTO RAHMAHADI 095314065

.

INFORMATICS ENGINEERING STUDY PROGRAM INFORMATICS ENGINEERING DEPARTMENT

FACULTY OF SCIENCE AND TECHNOLOGY SANATA DHARMA UNIVERSITY

YOGYAKARTA 2016

iv

LEMBAR MOTTO

“If you’re afraid to FAIL, then you’re probably going to fail”

v

PERNYATAAN

Dengan ini saya menyatakan bahwa Laporan Skripsi ini tidak terdapat karya yang pernah diajukan untuk memperoleh gelar kesarjanaan di suatu Perguruan Tinggi, dan sepanjang pengetahuan saya juga tidak terdapat karya atau pendapat yang pernah ditulis atau diterbitkan oleh orang lain, kecuali yang secara tertulis diacu dalam naskah ini dan disebutkan dalam daftar pustaka.

Yogyakarta, 20 Juli 2016

vi

Abstrak

Minat para konsumen pada layanan internet semakin meningkat untuk berbagi informasi. Ada banyak instansi yang membuat sebuah layanan yang memberikan informasi untuk para konsumen atau penggunanya. Dalam hal ini instansi-instansi tersebut membuat layanan sarana dan prasarana untuk memberikan informasi berupa Official Website. Salah satu instansi yang memiliki official website adalah instansi pendidikan seperti Universitas Sanata Dharma Yogyakarta, yang memiliki official website Perpustakan Universitas Sanata Dharma. (www.library.usd.ac.id)

Pihak universitas harus memperhatikan performa dari website Perpustakaan Sanata Dharma, salah satu nya adalah Webload Performance, dimana proses ini terjadi pada saat pertama kali website diakses dan membuka halaman home dari website tersebut. Hal yang mempengaruhi adalah jumlah web aset. Untuk dapat meningkatkan performa dari webload, maka perlu menerapkan teknologi kompresi web aset yaitu Grunt. Dimana sistem kerja dari Grunt adalah melakukan kompresi pada web aset Javascript dan CSS.

vii

Abstract

The interest of consumers on internet services increased to share information. There are many agencies that create a service that provides information to consumers or users. In this case the agencies to make the service infrastructure to provide information in the form of Official Website. One of the agencies that have official website is educational institutions like the University of Sanata Dharma Yogyakarta, which has the official website of Sanata Dharma University Library (library.usd.ac.id).

The university must pay attention to the performance of Sanata Dharma Library website, one of them is webload Performance. Where this process occurs during the first website accessible and open the home page of the website. Things that influence is the number of web assets. In order to improve the performance of webload, it is necessary to apply a compression technology that is Grunt web assets. Where the working system of Grunt is doing on the web assets compression Javascript and CSS

viii

PUBLIKASI KARYA ILMIAH UNTUK KEPERLUAN AKADEMIS

Yang bertanda tangan dibawah ini, saya mahasiswa Universitas Sanata Dharma : Nama : Nicodimus Dwiyanto Rahmahadi

Nomor Mahasiswa : 095314065

Demi pengembangan ilmu pengetahuan, saya memberikan kepada perpustakaan Universitas Sanata Dharma karya ilmiah saya yang berjudul :

KAJIAN TEKNOLOGI WEB ASET GRUNT PADA WEBSITE PERPUSTAKAAN UNIVERSITAS SANATA DHARMA

Beserta perangkat yang diperlukan. Dengan demikian saya memberikan kepada Perpustakaan Universitas Sanata Dharma hak untuk menyimpan, mengalihkan dalam bentuk media lain, mengelolanya dalam bentuk pangkalan data, mendistribusikan secara terbatas, dan mempublikasikannya di Internet atau media lain untuk kepentingan akademis tanpa perlu meminta ijin dari saya maupun memberikan royalty kepada saya selama tetap mencantukan nama saya sebagai penulis.

Demikian pernyataan ini saya buat dengan sebenarnya.

Dibuat di Yogyakarta Pada tanggal : 20 Juli 2016 Yang menyatakan,

ix

KATA PENGANTAR

Syukur kepada Tuhan Yang Maha Esa atas segala berkat dan bimbingan-Nya, sehingga penulis dapat menyelesaikan tugas akhir ini dengan baik. Tugas akhir ini disusun untuk memenuhi salah satu syarat untuk mencapai derajat dan memperoleh gelar Sarjana Komputer dari Program Studi Teknik Informatika, Fakultas Sains dan Teknologi, Universitas Sanata Dharma Yogyakarta. Penulis menyadari bahwa dalam pembuatan tugas akhir ini tidak terlepas dari bantuan berbagai pihak baik secara langsung maupun tidak langsung. Oleh sebab itu, pada kesempatan ini penulis ingin mengucapkan terimakasih kepada:

1. Tuhan Yesus Kristus, yang selalu memberikan pencerahan dan membimbing saya dalam menyelesaikan tugas akhir ini.

2. Ibu Anastasia Rita Widiarti, M.Kom,. selaku dosen pembimbing, yang telah meluangkan waktu dan pikiran untuk membantu, membimbing dan memberikan banyak masukan dan saran dalam proses penyusunan tugas akhir ini.

3. Keluarga saya, bapak Hadi Suyono dan ibu Tarmiyati, yang telah memberikan kesempatan pada saya untuk dapat menimba ilmu yang sangat banyak dan tidak pernah berhenti meluangkan waktu untuk selalu mendoakan dan memberi restu. Dan Mas Fibry yang selalu mendorong dan member motivasi demi menyelesaikan studi saya.

4. Yustina Dwi Adriati Wulandari, yang selalu mendukung, memberi semangat, menghibur, dan memotivasi saya dalam penyelesaian tugas akhir ini.

5. Teman-teman seperjuangan, Yosi, Fidi, Jenot, Kiki, Yudi, Cosmas Puji, Alvin, Andi dan terutama Putera yang sudah membantu dan membagi ilmu nya.

6. Teman-teman Pasjub, Seba dan Nyelekutis yang selalu mendukung dan memberi semangat selama proses penyelesaian Skripsi.

x

7. Teman-teman Teknik Informatika Sanata Dharma 2009, yang saling memberikan semangat dan dukungan dalam pengerjaan tugas akhir.

Yogyakarta, 20 Juli 2016

xi

DAFTAR ISI

HALAMAN JUDUL ……….. i

HALAMAN PERSETUJUAN ... ii

HALAMAN PENGESAHAN ………...………. iii

LEMBAR MOTO ………..…… iv

HALAMAN PERNYATAAN KEASLIAN KARYA ... v

ABSTRAK ... vi

ABSTRACT ... vii

LEMBAR PERNYATAAN PERSETUJUAN PUBLIKASI ……… viii

KATA PENGANTAR ... ix

DAFTAR ISI ………..…… xi

DAFTAR GAMBAR ………... xiii

DAFTAR TABEL ... xiv

BAB I PENDAHULUAN ………... 1

1.1 Latar Belakang………. 1

1.2 Rumusan Masalah ...……… 3

1.3 Tujuan Penelitian………....……… 3

1.4 Batasan Masalah …...………... 3

1.5 Metodologi Penulisan ..………... 4

1.6 Sistematika Penulisan ………... 5

BAB II LANDASAN TEORI ...………... 7

2.1 Web……...….………... 7

2.1.1 Pengertian Web………... 7

2.1.2 Pengertian Situs Web……….. 8

2.1.3 HTML………. 8

2.1.4 CSS………. 9

2.1.5 JavaScript……… 12

xii

2.3 Node Package Module……….. ...………... 14

2.3.1 Grunt……...………... 14

BAB III METODOLOGI PENELITIAN ………... 16

3.1. Subjek Dan Objek Penelitian...………... 16

3.2. Penelitian Kepustakaan………….………. 3.2.1. Studi Kepustakaan……...…………. 3.2.2. Pengumpulan Data………... ... 3.2.3. Menyajikan Data Hasil Penerapan……... 16 16 17 17 3.3. Implementasi ……...….……….. 18

3.3.1. Grunt version 0.4.5………..………... 3.3.2. JetBrains PhpStorm 9.0.2.………... 3.3.3. Xampp version 2.1……….. 3.3.4. Devtool Chrome………. 18 18 19 19 3.4 Analisis Hasil Pengujian………. 20

BAB IV IMPLEMENTASI DAN ANALISA HASIL………... 4.1. Analisis Data Website Perpustakaan Universitas Sanata Dharma... 21 21 4.2. Implementasi Grunt dan Pembahasan………... 26

4.3. Penghitungan Manual……….…………... 29

BAB V PENUTUP …………... 34 5.1 Kesimpulan …………...

5.2 Saran ...

34 35

DAFTAR PUSTAKA………. LAMPIRAN………..

xiii

DAFTAR GAMBAR

Gambar (4-1) : Inspect Element Devtool Chrome.………...……….. 22

Gambar (4-2) : Tampilan Inspect Element Devtool Chrome…...……….... 22

Gambar (4-3) : Performa webload www.library.usd.ac.id... 23

Gambar (4-4) : Konfigurasi Grunt ... 26

Gambar (4-5) : konfigurasi hasil kompresi... 26

Gambar (4-6) : Konfigurasi Variabel………... 27

xiv

DAFTAR TABEL

Tabel (4-1) : Aset-aset website Perpustakaan Universitas Sanata Dharma.... 24

Tabel (4-2) : Web aset CSS ...………...………... 25

Tabel (4-3) : Web aset JavaScript………... 25

Tabel (4-4) : Hasil Perbandingan Perubahan menggunakan Grunt... 28

Tabel (4-5) : Hasil Penghitungan Manual Ukuran Aset-Aset…... 30

Tabel (4-6) : Hasil Kompresi pada Aset JS dan CSS…... 30

Tabel (4-7) : Hasil Penghitungan Manual Waktu Transfer Aset-Aset ... 31

1

BAB I PENDAHULUAN

1.1 Latar Belakang

Pembangunan official website bagi lembaga pendidikan bertujuan untuk mempromosikan identitas mereka, sebagai bentuk eksistensi dengan memaparkan berbagai program studi, prestasi dan aktifitas yang akan atau sedang berlangsung. Sebagian besar dari pemilik website tersebut sangat memperhatikan dari sisi user interface dan user experience design karena sebuah official website bertujuan untuk menggambarkan tingkat profesionalitas, visi, dan misi yang ingin ditunjukan kepada masyarakat. Salah satu diantaranya adalah Universitas Sanata Dharma Yogyakarta, yang memiliki official website perpustakaan (http://www.library.usd.ac.id/). Namun hampir sebagian besar universitas belum memperhatikan performa dari situs yang mereka miliki, salah satunya webload performance.

Webload performance adalah proses pertama kali browser mengakses sebuah website. Proses webload mempengaruhi jumlah paket data dan data transfer sebuah website, dimana proses webload yang terlalu banyak memiliki data transfer akan memperlama proses akses website tersebut yang juga akan memakan paket data yang banyak. Buruknya webload performance pada sebuah situs juga akan mempengaruhi banyaknya paket data yang diperlukan jika diakses pada gadget seperti smartphone dan tablet yang memiliki tingkat mobilitas tinggi.

Bagi universitas-universitas yang mempergunakan official website sebagai sarana untuk menarik minat mahasiswa baru, tentunya perhatian terhadap webload performance sangat dibutuhkan. Hal ini menarik perhatian penulis untuk dapat menganalisa metode-metode baru, agar dapat diimplementasikan pada official website salah satunya adalah website perpustakaan yang dimiliki oleh Universitas Sanata Dharma, yakni http://www.library.usd.ac.id/. Dalam penelitian ini penulis ingin memaksimalkan performa webload dari website http://www.library.usd.ac.id/, dimana kecepatan webload itu dipengaruhi oleh struktur server, arsitektur software, dan seberapa banyak aset yang diterima. Dalam penelitian kali ini penulis mefokuskan pada aset yang terdapat pada website Perpustakaan Universitas Sanata Dharma. Setiap halaman website berisikan sejumlah aset dengan berbagai jenis dan kegunaan. Aset itu sendiri yang merupakan bagian yang mendukung sebuah website yang mengacu pada semua bahan yang diperlukan untuk membangun sebuah website, seperti html document, javascript, stylesheet, images, font dan sebagainya. Sehingga penulis lebih mefokuskan penelitian ini dalam membantu meningkatkan performa webload dengan melakukan kompresi pada aset-aset tersebut.

Kelemahan pada performa website Perpustakaan Universitas Sanata Dharma salah satunya terletak pada akses webload berupa data transfer data yang berat yang melebihi 3.8 MB dan jumlah data request yang banyak, hal ini membuat penulis tertarik untuk menerapkan teknologi kompresi web aset, salah satunya adalah Grunt. Grunt sudah banyak dimanfaatkan oleh banyak user dalam pembuatan sebuah website. Seperti tercantum pada

(http://gruntjs.com/who-uses-grunt) ada banyak situs internasional seperti Twitter, Adobe, Mozilla, Opera, LiveChat, Wordpress dan sebagainya memanfaatkan teknologi dari Grunt ini sendiri. Pada penelitian kali ini penulis tidak menerapkan teknologi kompresi web aset saja, melainkan menganalisa perubahan yang terjadi pada website Perpustakaan Universitas Sanata Dharma setelah dilakukan proses kompresi pada web aset.

1.2 Rumusan Masalah

Seberapa efektif penggunaan Grunt pada perubahan performa webload yang terjadi pada website Perpustakaan Universitas Sanata Dharma?

1.3 Tujuan Penelitian

Tujuan diadakan penelitian ini agar dapat mengetahui seberapa efektif penggunaan Grunt dan cara penerapannya sehingga menemukan perubahan performa webload pada Perpustakaan Universitas Sanata Dharma.

1.4 Batasan Masalah

 Aset-aset yang akan dilakukan kompresi adalah Javascript (js) dan CSS.

 Pengujian dilakukan secara offline. (localhost)

1.5 Metodologi Penelitian

Metodologi yang digunakan dalam pelaksanaan penulisan tugas akhir ini adalah sebagai berikut

1. Penelitian Kepustakaan

Mempelajari literatur tentang penggunaan teknologi kompresi pada web aset. Meneliti dan menentukan kebutuhan web aset dari website perpustakaan Univesitas Sanata Dharma dalam meningkatkan performa webload. Selajutnya melakukan analisis sistem untuk mengidentifikasi teknologi kompresi web aset yang digunakan untuk meningkatkan performa dari website library.usd.ac.id

2. Implementasi.

Sebelum melakukan implementasi menyebutkan kebutuhan apa saja yang dibutuhkan dalam penelitian, melakukan instalasi Grunt. Selanjutnya melakukan implementasi Grunt dengan melakukan konfigurasi pada website perpustakaan Universitas Sanata Dharma dan melakukan proses scripting untuk pengolahan data berupa web aset pada website library.usd.ac.id yang sebelumnya sudah dianalisis.

3. Analisis Hasil Pengujian

Menganalisa hasil yang di dapat dari pengujian/percobaan untuk dapat menyimpulkan hasil dari penelitian.

1.6 Sistematika Penulisan

Adapun sistematika penulisan skripsi sebagai berikut :

BAB I PENDAHULUAN

Berisi tentang latar belakang masalah, rumusan masalah, tujuan, batasan masalah, metodologi, dan sistematika penulisan.

BAB II LANDASAN TEORI

Bab ini berisi penjelasan teori-teori yang dipergunakan dalam penelitian ini.

BAB III METODOLOGI PENELITIAN

Bab ini berisi tentang metodologi penelitian.

BAB IV IMPLEMENTASI

Bab ini berisi tentang penyajian dan pembahasan hasil pengujian / penelitian yang didapatkan dari hasil analisis dan uji dari performa webload

BAB V KESIMPULAN DAN SARAN

Bab ini berisi tentang kesimpulan pengujian / penelitian dan juga berisi saran terkait kinerja website universitas.

7

BAB II

LANDASAN TEORI

Bab ini berisi mengenai penjelasan dari beberapa teori atau pengertian terkait dengan penelitian ini. Isi dari bab ini merujuk dari beberapa artikel, buku-buku, karya ilmiah, hingga sumber-sumber lain di internet. Isi dari bab ini berupa sub bab dan tiap sub bab juga terdiri dari poin-poin penjelasan.

Adapun pokok-pokok pembahasan dari bab ini meliputi website, kinerja situs web (web performance), web assets (javascript, gulp, webpack,css, less, sass, uglify,image comparison)

2.1 Web

2.1.1 Pengertian Web

Web adalah salah satu aplikasi yang berisikan dokumen-dokumen multi-media (teks, gambar, suara, animasi, video) di dalamnya yang menggunakan protokol HTTP (hypertex transfer protocol) dan untuk mengaksesnya menggunakan perangkat lunak yang disebut browser (Arief, 2011).

2.1.2 Pengertian Situs Web

Arief (2011) menyatakan situs web merupakan kumpulan dari halaman web yang sudah dipublikasikan dijaringan internet dan memiliki domain / URL (Uniform Resource Locator) yang dapat diakses semua pengguna internet dengan cara mengetikkan alamatnya.

2.1.3 HTML

HTML adalah bahasa komputer yang dirancang untuk memungkinkan dalam pembuatan website. HTML merupakan halaman yang berada pada suatu situs internet atau web. HTML merupakan metode yang menautkan (link) satu dokumen dengan dokumen yang lain melalui teks. HTML merupakan framework internet, hampir semua situs web yang ada menggunkan HTML untuk menampilkan teks, grafik, suara, dan animasinya. HTML adalah suatu bahasa yang dikenali oleh web browser untuk menampilkan informasi dengan lebih menarik dibandingkan dengan tulisan teks biasa (plain text).

2.1.4 CSS

Cascading Style Sheet atau CSS digunakan untuk mengendalikan penyajian suatu halaman XHTML. Sebagai contoh, sebuah berkas CSS akan mengendalikan huruf-huruf, margin, warna, latar grafis, dan aspek-aspek lain dari penampilan halaman web. CSS mengizinkan pengguna memisahkan konten halaman XHTML dari penampilannya. Pembuatan layout yang salah, maka web kita akan sala diterjemahkan oleh browser. Hal itu juga bisa disebabkan karena setiap browser memiliki dukungan bahasa (CSS) yang berbeda dan tentunya default dari browsernya sendiri yang berbeda-beda.

Dalam me-layout sebuah web , ada dua metode yang sering dipakai untuk membuat sebuah layout web, yaitu :

1. Metode Table

2. Metode Div

Pada umumnya ada empat bagian yang sering ada dalam layout sebuah web yaitu:

a. Header : berisi tema web / judul

b. Menu : menu link web

d. Footer : identitas / copyright

Penggunaan CSS management extension meliputi :

1. LESS

Less adalah preprosesor CSS yang memberikan sentuhan dinamis kepada CSS dengan vitur variabel, mixin, serta operasi dan fungsi yang dimilikinya. Tujuan dibuatnya LESS sendiri adalah untuk memberikan kemudahan dan keringkasan dalam membangun tampilan website yang menggunakan CSS.

2. SASS (Syntactically Awesome Stylesheets)

SASS merupakan extension dari CSS yang menambahkan kekuatan dalam pemakain bahasa dasar. Hal ini memungkinkan untuk menggunakan variabel, aturan terorganisir, mixin, imor inline dan sebagainya dimana semmuanya menggunakan syntax CSS kompatible. SASS membantu menjaga big stylesheetagar terorganisir dengan baik dan mendapatkan small-stylesheet berjalan dengan cepat, terutama dengan bantuan Compass style library.

CSS Minify

Modul ini digunakan untuk menghapus spasi yang tidak perlu dari CSS. Untuk file CSS statis, direkomendasikan bahwa mengecilkan selama tahap membangun penyebaran web.

Uglify

Uglifi CSS dapat digunakan untuk menggabungkan dan mengecilkan aset JavaScript sehingga mereka membutuhkan permintaan HTTP kurang dan membuat beban situs lebih cepat. UglifyCSS adalah CSS compressor / beautifier yang sangat mirip dengan UglifyJS.

NodeJS

NodeJs adalah sebuah platform software yang dipakai untuk membangun aplikasi-aplikasi serverside yang fleksibel di sebuah network / jaringan. Menggunakn JavaScript sebagai pemrograman dan dapat dengan mudah menghasilkan throughput / pemrosesan tingkat tinggi melalui non-blocking I/O. Fitur yang dimiliki yaitu built-in HTTP server library yang menjadikannya mampu menjadi sebuah web server tanpa bantuan software lainnya seperti Apache atau Nginx

NPM (Node Package Manager)

NPM adalah paket manager untuk NodeJs. Diciptakan tahun 2009 sebagai sebuah proyek open source untuk membantu memudahkan pengembangan JavaScript yang dikemas dalam sebuah modul.

2.1.5 JavaScript

JavaScript adalah bahasa pemrograman yang mudah untuk di-implementasikan dalam pembuatan program atau app. Dimana bersifat Client Side Programming Language atau dimana tipe bahasa pemrograman yang pemrosesannya dilakukan oleh client. Keunggulan JavaScript yaitu dapat berjalan di semua platform dengan browser yang mendukung JavaScript, dan hampir semua platform dan browser saat ini mendukung JavaScript. Contoh aplikasi yang dibangun dengan JavaScript adalah Google Maps yang dapat berjalan di atas Linux, Windows dan Mac Os.

JavaScript sangat cocok untuk mengenalkan pada bahasa pemrograman komputer, penulisan JavaScript juga sama halnya dengan bahasa pemrograman C, C++ dan java, bahasa pemrograman yang banyak kontribusinya dalam bidang development.

2.2 Web Aset

Berdasarkan WebStandardsSherpa.com yang merupakan sebuah website yang membantu memberikan kesempatan bagi website profesional untuk mendapatkan informasi, mengumpulkan saran, dan memperlajari praktek terbaik dari para ahli di lapangan untuk membantu dalam proses peningkatan kualitas pekerjaan sebuah website. Menurut penjelasan dalam WebStandardsSherpa.com , Web aset sendiri merupakan bagian yang mendukung dari sebuah website yang mengacu pada semua bahan yang diperlukan untuk membangun sebuah website (Web Standart Sherpa). Setiap aset dipergunakan untuk melengkapi kebutuhan client side layer agar browser dapat menterjemahkannya menjadi sebuah website yang memiliki tampilan dan dapat berfungsi. Adapun tipe web aset yang diperlukan dan didukung yakni : html document, javascript, stylesheet, images, font dan sebagainya. Web aset tersebut diunduh oleh browser ketika sebuah halaman situs dibuka oleh pengunjung. Besarnya muatan aset yang diunduh mempengaruhi waktu tunggu untuk situs tersebut dapat siap dipergunakan dan mempengaruhi seberapa besar daya yang dipergunakan dalam mengerjakan proses pengunduhan dan penerjemahan oleh browser.

2.3 Node Package Module

Penulis akan menerapkan metode untuk meningkatkan web performance. Berikut ini metode yang akan digunakan dalam melakukan peningkatan performa. Pertama menggunakan javascript taskrunner atau biasa disebut dengan automatisasi pekerjaan. Task runner adalah suatu aktifitas untuk mempermudah semua pekerjaan rutinitas pada saat developing aplikasi seperti validasi HTML, minification, compiling, unit testing, render dan aktifasi lainnya.

2.3.1 Grunt

Grunt adalah salah satu dari beberapa task runner yang memiliki banyak task yang siap digunakan. Merupakan automation tool berbasis line interface yang dibangun menggunakan node.js. Grunt berguna sebagai automation tools dalam pengembangan aplikasi berbasis HTML. Automation tools berfungsi untuk menjalankan tugas-tugas yang dilakukan secara berulang seperti minification, kompilasi, unit test dan lain sebagainya untuk menghemat waktu pengembang dalam melakukan tugas-tugas tersebut. Konfigurasi Grunt dideklarasikan dalam sebuah file bernama Gruntfile yang diletakkan pada direktori project.

Grunt disini menjalankan kompresi terhadap uglify dan minify, dimana keduanya memiliki fungsi untuk mengecilkan aset-aset. Dimana

selanjutnya jumlah aset-aset yang banyak dapat berubah atau dikompresi menjadi lebih kecil, dilihat dari ukuran setiap aset.

Sebelum memulai project menggunakan Grunt, membutuhkan dua file konfigurasi yaitu packcage.json dan Gruntfile.js. Package.json merupakan file yang digunakan oleh npm untuk menyimpan metadata dalam project yang yang dipublish sebagai npm modules. Sedangkan Gruntfile.js merupakan yang digunakan untuk mengkonfigurasi dan mendefinisikan tugas serta mendaftarkan plugins. (gruntjs.com)

16

BAB III

METODOLOGI PENELITIAN

Tujuan dari penelitian ini untuk mengetahui performa webload dari website Perpustakaan Universitas Sanata Dharma, akan dilakukan penerapan teknologi kompresi web aset pada website tersebut.

Teknologi kompresi web aset yang digunakan untuk meningkatkan performa webload yang dipilih adalah Grunt. Grunt memiliki ketentuan sendiri, aset apa saja yang bisa dilakukan kompresi dan konfigurasi apa saja yang harus dilakukan pada sebuah website.

3.1 Subjek dan Objek Penelitian

Subjek penelitian ini adalah website Perpustakaan Universitas Sanata Dharma. Objek penelitian adalah perubahan performa webload dari website Perpustakaan Universitas Sanata Dharma setelah penerapan teknologi kompresi web (Grunt).

3.2 Penelitian Kepustakaan 3.2.1. Studi kepustakaan

Studi kepustakaan dengan mempelajari hal-hal yang terkait dengan penelitian ini dari buku, internet dan makalah yang sejenis.

3.2.2 Pengumpulan Data

Tahap selanjutnya adalah tahap pengumpulan data. Tahapan pengumpulan data yaitu dengan melakukan pengujian pada website Perpustakaan Universitas Sanata Dharma untuk melihat perubahan performa webload setelah dilakukan penerapan teknologi kompresi web (Grunt) menggunakan tool yang sebelumnya digunakan untuk melihat performa webload dan bentuk perubahan dari web aset.

1. upload database website library.usd.ac.id ke localhost

2. melakukan konfigurasi CSS_Registry dan JS_Registry pada file Gruntfile.js yang disimpan dalam folder perpus-baru

3. melakukan inspect element menggunakan devtool chrome, untuk melihat perubahan pada js dan css.

3.2.3. Menyajikan data hasil penerapan

Data dari hasil penerapan teknologi kompresi web aset (Grunt) yang memberikan perubahan sebelum maupun sesudah dilakukan kompresi pada web aset dan performa webload ditampilkan dalam bentuk tabel dimana data yang ditampilkan berupa paket data dan jumlah transfer data.

3.3 Implementasi

Berdasarkan judul penelitian ini, penulis menggunakan alat bantu yang mendukung dalam penerapan teknologi Grunt itu ,antara lain sebagai berikut:

3.3.1 Grunt version 0.4.5

Merupakan teknologi yang memudahkan untuk menciptakan sebuah file repo. Dan otomatisasi yang mempermudah pekerjaan yang harus dilakaukan secara berulang seperti minifikasi, kompilasi, unit testing dan sebagainya. Perkembangan Grunt juga sangat pesat yang terbukti dengan adanya jumlah plugin yang bisa dipakasi sebagai pilihan otomatisasi.

Dalam proses kompresi web aset memilih menggunakan teknologi kompresi web yakni Grunt. Sebelum mengintegrasikan grunt ke dalam website perpustakaan Universitas Sanata Dharma, maka perlu melakukan proses install grunt ke dalam sistem (pc/laptop).

3.3.2 JetBrains PhpStorm 9.0.2

Jetbrains PhpStorm merupakan code editor yang menyediakan dukungan bagi PHP, seperti HTML, javascript, CSS, Sass, Less, CofeeScript dan masih banyak bahasa pemrograman yang lain.

3.3.3 Xampp version 2.1

Xampp merupakan tool yang menyediakan paket perangkat lunak ke dalam satu buah paket. Dengan menginstall XAMPP maka tidak perlu lagi melakukan instalasi dan konfigurasi web server Apache, PHP dan MySQL secara manual. XAMPP akan menginstalasi dan mengkonfigurasikannya secara otomatis.

3.3.4 Devtool Chrome

Merupakan seperangkat web authoring yang disediakan oleh Google Chrome untuk pengembang web dapat mengakses lebih dalam ke dalam internal browser dan aplikasi web yang secara efisien melacak masalah tata letak , mengatur javascript dan wawasan untuk optimasi code pada web. Penggunaan tool ini adalah untuk mengetahui performa webload dan aset apa saja yang terdapat dalam website.

Pada tahap awal sebelum dilakukan pengujian, penguji melakukan analisa pada website, yaitu aset apa saja yang bisa dilakukan kompresi oleh Grunt. Setelah menemukan aset apa saja yang bisa dilakukan kompresi, selanjutnya melakukan instalasi Grunt kedalam localhost dan akan menghasilkan file Gruntfil.js. Di dalam

file Gruntfile.js, selanjutnya membuat konfigurasi agar dapat diterapkan aset apa saja

yang bisa dikonfigurasikan. Dalam variabel “const _DEV_PATH_ = './themes/usd/files/';” merupakan lokasi dimana web aset yang belum dilakukan

kompresi, sedangkan pada variabel “const _PUBLIC_PATH_ = './themes/usd/assets/';” merupakan hasil dari kompresi web aset itu. Pada fungsi

“const CSS_BUILD_MIN = _PUBLIC_PATH_+'css/themes.min.css';” memiliki fungsi sebagai hasil yang didapat setelah dilakukan kompresi terutama pada web aset

.css. Sedangkan pada fungsi “const JS_BUILD = _PUBLIC_PATH_+'js/themes.js';” merupakan hasil dari kompresi dari web aset .js.

3.4 Analisis Hasil Pengujian

Setelah melakukan pengujian pada website Perpustakaan Universitas Sanata Dharma, akan didapatkan perubahan yang terlihat pada web aset. Tahap akhir dari penelitian ini yakni pendokumentasian hasil analisis dan hasil penemuan selama proses penelitian yang disajikan pada bab 5 yaitu dalam bentuk kesimpulan.

21

BAB IV

IMPLEMENTASI DAN ANALISA HASIL

Implementasi merupakan tahap pengelolaan management dan struktur aset

dari website yang telah dianalisa. Pada bab ini akan dijelaskan hasil implementasi dan pembahasan dari hasil konfigurasi dan penerapan teknologi kompresi web aset pada website Perpustakaan Universitas Sanata Dharma.

4.1. Analisis Data Website Perpustakaan Universitas Sanata Dharma

Untuk melihat performa webload dan aset apa saja yang terdapat pada website Perpustakaan Universitas Sanata Dharma, menggunakan tool yang bisa di akses langsung dari Browser (Google Chrome) yakni Devtool Chrome. Dimana Devtool Chrome merupakan seperangkat web authoring yang disediakan oleh Google Chrome untuk pengembang web dapat mengakses lebih dalam ke dalam internal browser dan aplikasi web yang secara efisien melacak masalah tata letak , mengatur javascript dan wawasan untuk optimasi code.

Gambar 4.1 Inspect Element Devtool Chrome

Sebelum menjalankan atau mengakses website tersebut, mengaktifkan terlebih dahulu Inspect Element, sehingga akan muncul tampilan seperti dibawah ini.

Berdasarkan hasil dari inspect element menggunakan devtool chrome dapat dilihat hasil performa webload pada website perpustakaan Universitas Sanata Dharma memiliki performa kurang maksimal.

Gambar 4.3 Performa webload www.library.usd.ac.id

Dapat dilihat pada gambar diatas merupakan hasil capture transfer data webload pada website perpustakaan Universitas Sanata Dharma sebesar 3.8 MB, dan jumlah request yang banyak dimana terlihat ada 157 request yang terlihat, dan file aset dari website tersebut, ini merupakan hasil performa webload yang kurang maksimal karena membutuhkan paket data yang besar. Di samping itu juga dapat

dilihat berdasarkan tabel dibawah ini, aset-aset apa saja yang terdapat dalam website Perpustakaan Universitas Sanata Dharma yang belum dilakukan kompresi, antara lain:

Tabel 4.1 Aset-aset website Perpustakaan Universitas Sanata Dharma

Web Aset (JavaScript) Web Aset (CSS) Jquery_003.js Jquery-ui.css Jquery-ui.js Bootstrap.css Jquery_002.js Template.css Password.js pwdStyles.css Slicker.js Menu.css

Jquery_004.js Responsiveslides-2.css Responsiveslides.js Responsiveslides.css Jquery_005.js Jquery_002.css Jquery_009.js Jquery.css Jquery_007.js

Jquery.js Scroll.js

Berdasarkan hasil yang didapat dari aset tersebut, selanjutnya dapat dianalisa berdasarkan kebutuhan dari Grunt, bahwa aset-aset tersebut dapat dikompres dengan melakukan konfigurasi menggunakan Grunt.

Data yang digunakan pada pengujian teknologi grunt berupa aset-aset css dan javascript yang terdapat dalam website Perpustakaan Universitas Sanata Dharma sebagai aset pendukung. Berikut ini merupakan aset-aset dari CSS dan Javascript yang belum mengalami kompresi.

Tabel 4.2 Web aset CSS

Web Aset CSS

Jquery-ui.css Responsiveslides-2.css Bootstrap.css Responsiveslides.css Template.css Jquery_002.css

pwdStyles.css Jquery.css

Menu.css

Tabel 4.3 Web aset Javascript Web Aset (JavaScript)

Jquery_003.js Responsiveslides.js Jquery-ui.js Jquery_005.js Jquery_002.js Jquery_009.js Password.js Jquery_007.js

Slicker.js Jquery.js Jquery_004.js Scroll.js

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 ’./themes/usd/files/’; . Sedangkan _PUBLIC_PATH merupakan lokasi folder hasil dari kompresi yang sudah

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.

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

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

Berikut ini merupakan penghitungan secara manual perubahan ukuran data yang dikirim berdasarkan aset-aset dari website. Dimana hasil dari kompresi dari Grunt jumlah ukuran data sebesar 362 kb untuk JS dan 181 kb untuk CSS.

Tabel 4.5. Hasil Penghitungan Manual Ukuran Aset-Aset

Tabel 4.6. Hasil Kompresi pada Aset JS dan CSS

Web Aset (JavaScript) Web Aset (CSS)

Themes.js (362 kb) Themes.min.css (181 kb) Web Aset (JavaScript) Web Aset (CSS)

Jquery_003.js (267 kb) Jquery-ui.css (32.5 kb) Jquery-ui.js (451 kb) Bootstrap.css (101 kb) Jquery_002.js (2.7 kb) Template.css (79.3 kb) Password.js (1.3 kb) pwdStyles.css (966 b) Slicker.js (1.2 kb) Menu.css (4.1 kb) Jquery_004.js (2.3 kb) Responsiveslides-2.css (2.9 kb) Responsiveslides.js (12 kb) Responsiveslides.css (837 b) Jquery_005.js (12.5 kb) Jquery_002.css (4.3 kb) Jquery_009.js (48.6 kb) Jquery.css (3.8 kb) Jquery_007.js (3.2 kb) TOTAL 229 kb Jquery.js (8.3 kb)

Scroll.js (1.7 kb) TOTAL 811.8 kb

Dilihat dari tabel perhitungan secara manual jumlah bobot paket data dari aset yang terdapat pada website Perpustakaan Universitas Sanata Dharma sebelum dan sesudah dilakukan kompresi menghasilkan perbandingan

Aset Javascript :

. � = . 9 %

Aset CSS : � = 9. %

Dari hasil perhitungan diatas dapat Grunt melakukan kompresi hingga 44.59 % dari aset Javascript. Sedangkan untuk aset CSS bisa dilakukan kompresi hingga 79.03 % dari total data.

Di samping itu juga bisa dilihat dari segi waktu sebelum dan sesudah dilakukan kompresi menggunakan Grunt, seperti pada tabel dibawah ini :

Tabel 4.7. Hasil Penghitungan Manual Waktu Transfer Aset-Aset

Web Aset (JavaScript) Web Aset (CSS)

Jquery_003.js (112 ms) Jquery-ui.css (96 ms) Jquery-ui.js (132 ms) Bootstrap.css (221 ms) Jquery_002.js (92 ms) Template.css (222 ms) Password.js (113 ms) pwdStyles.css (172 ms) Slicker.js (224 ms) Menu.css (165 ms) Jquery_004.js (225 ms) Responsiveslides-2.css (187 ms) Responsiveslides.js (226 ms) Responsiveslides.css (165 ms) Jquery_005.js (225 ms) Jquery_002.css (189 ms)

Tabel 4.8. Hasil Waktu Data Transfer pada Aset JS dan CSS

Web Aset (JavaScript) Web Aset (CSS)

Themes.js (103 ms) Themes.min.css (42 ms)

Pada hasil perhitungan secara manual jumlah waktu data transfer dari aset-aset Javascript dan CSS sebelum dan sesudah dilakukan kompresi adalah sebagai berikut :

Aset Javascript :

A = Total waktu awal aset Javascript

x = total waktu setelah dilakukan kompresi Javascript

A – x = z 3210 – 103 = 3107

�

� = ⋯ % � = 9 . 9 %

Web Aset (JavaScript) Web Aset (CSS)

Jquery_009.js (242 ms) Jquery.css (96 ms) Jquery_007.js (239 ms) TOTAL 1513 ms Jquery.js (240 ms)

Scroll.js (240 ms) TOTAL 3210 ms

Aset CSS :

B = Total waktu awal aset CSS

y = total waktu setelah dilakukan kompresi CSS

B – y = z 1513 – 42 = 1471

� _{� = ⋯ % � = 9 . %}

Dari hasil yang didapat dari perhitungan secara manual waktu data transfer pada aset Javascript didapatkan hasil kompresi Grunt yang mengalami percepatan sebesar 96.79 % , Sedangkan untuk aset CSS setelah dilakukan kompresi terjadi percepatan sebesar 97.23 % dari seluruh jumlah waktu data transfer yang dilakukan selama mendownload aset-aset tersebut.

34

BAB V PENUTUP

5.1. Kesimpulan

Setelah menyelesaikan pembuatan tugas akhir berjudul Penerapan Teknologi Kompresi Grunt pada Website Perpustakaan Universitas Sanata Dharma ini, penulis dapat menyimpulkan :

 Penerapan teknologi kompresi web aset (Grunt) dapat diterapkan langsung pada website Perpustakaan Universitas Sanata Dharma dengan melakukan konfigurasi pada file Gruntfile.js yang sudah disediakan langsung setelah Grunt di install dan memberikan perubahan pada pemakaian paket data yang lebih kecil dalam mengakses website.

 Aset-aset dari website Perpustakaan Universitas Sanata Dharma dapat di kompresi sesuai dengan kebutuhan dari teknologi kompresi Grunt yaitu CSS dan JavaScript. Dari segi efektifitasnya web tidak perlu download aset-aset terlalu banyak yang bisa memakan waktu dan paket data.

 Dari hasil perhitungan perbandingan presentase perubahan, Grunt melakukan kompresi hingga 44.59 % dari aset Javascript. Sedangkan untuk aset CSS bisa dilakukan kompresi hingga 79.03 % dari total data. Untuk waktu data transfer pada saat melakukan download aset-aset dan mengalami percepatan dari Javascript sebesar 9 . 9 % dan aset CSS

9 . % dari total waktu data transfer atau me-download aset-aset tersebut.

5.2. Saran

Untuk pengembangan Teknologi Kompresi Grunt pada tahap selanjutnya, penulis menyarankan :

 Diperlukan penelitian lanjutan terhadap Grunt, agar dapat ditemukan aset-aset lain yang bisa dilakukan kompresi selain CSS dan Javascript.

 Melakukan penerapan teknologi kompresi Grunt terhadap website lain, dengan jumlah aset yang lebih banyak. Sehingga dapat terlihat perubahan bobot aset pada saat website diakses.

DAFTAR PUSTAKA

Arief, Rudyanto. 2011. Pemrograman Web Dinamis menggunakan PHP dan MySQL. Yogyakarta : Andi Offset

Nahasan N, Jeanot., 2013,Pengujian Kinerja Indonesia Menggunakan Testing Enviroment Situs Informasi Pariwisata Di Keynote Internet (KITE), Skripsi, Jurusan Teknik Informatika FST USD, Yogyakarta.

GITHUB, https://github.com/gulpjs/gulp/issues/540 Diakses pada tanggal 10 Oktober 2015

GRUNT The JavaScript Task Runner, http://gruntjs.com/. Diakses pada tanggal 26 Agustus 2015

JavaScript, https://developer.mozilla.org/id/docs/Web/JavaScript/Getting_Started. Diakses pada tanggal 26 Agustus 2015

Mengenal Less framework untuk CSS, http://bisakomputer.com/mengenal-less-framework-untuk-css/. Diakses pada tanggal 27 Agustus 2015

SASS (Syntactically Awesome Stylesheets), http://sass-lang.com/documentation/file.SASS_REFERENCE.html. Diakses pada tanggal 27 Agustus 2015

CSS minifier, http://search.cpan.org/~pmichaux/CSS-Minifier-0.01/lib/CSS/Minifier.pm. Diakses pada tanggal 27 Agustus 2015

Uglify CSS Package, https://www.npmjs.com/package/uglifycss. Diakses pada tanggal 27 agustus 2015

NPM (Node Package Manager), https://www.npmjs.com/about. Diakses tanggal 27 Agustus 2015

Web Standards Sherpa, http://webstandardssherpa.com/. Diakses tanggal 28 Desember 2015

LAMPIRAN Tahap Instalasi Grunt

Sebelum melakukan proses instalasi grunt, terlebih dahulu melakukan instalasi node.js. Selanjutnya dapat melakukan tahap-tahap instalasi grunt berikut:

1. menginstall Grunt command line interface (CLI) secara global. Untuk ubuntu harus menggukan sudo sedangkan untuk Windows bisa menjalankan sebagai Administrator. Buka Windows Command Prompt dan selanjutnya memasukkan perintah berikut

Gambar install grunt-cli (secara global)

Proses ini akan menghasilkan perintah grunt pada jalur sistem, yang memungkinkan untuk dijalankan dari direktori manapun.

2. Install grunt dan gruntplugins, untuk menambahkan grunt dan gruntplugins ke dalam package.json yang sudah ada adalah dengan perintah npm install <module> --save-dev . Tidak hanya menginstal modul local (perpus) tapi akan secara otomatis akan ditambahkan ke

bagian devDependencies. Berikut ini cara menginstall versi terbaru daru grunt di dalam folder proyek kita.

Gambar. Cara menginstal grunt dalam modul local (perpus)

3. Hal yang sama dapat dilakukan untuk menginstal gruntplugins dan modul-modul lainnya. Berikut ini cara menginstal modul JShint, modul cssmin, modul uglify. Proses tersebut dilakukan melalui Windows Command Prompt.

Gambar Cara menginstal modul cssmin

Tampilan Webite Perpustakaan Universitas Sanata Dharma

Berikut ini merupakan tampilan dari hasil inspect element. Yang menampilkan jumlah Request dan Paket Data dan aset-aset yang terdapat didalam website.

Gambar Request dan Paket Data setelah Dikompresi

Gambar. Aset CSS setelah Dikompresi

Gambar. Aset JavaScript setelah Dikompresi

Source konfigurasi Grunt pada File Gruntfile.js

/*global module:false*/

module.exports = function(grunt) {

const _DEV_PATH_ = './themes/usd/files/'; const _PUBLIC_PATH_ = './themes/usd/assets/';

const CSS_BUILD = _PUBLIC_PATH_+'css/themes.css';

const CSS_BUILD_MIN = _PUBLIC_PATH_+'css/themes.min.css'; const JS_BUILD = _PUBLIC_PATH_+'js/themes.js';

var CSS_Registry = [ 'jquery-ui.css', 'bootstrap.css', 'responsiveslides.css', 'responsiveslides-2.css', 'jquery_002.css', 'jquery.css', 'template.css', 'PwdStyles.css', 'menu.css', ];

var JS_Registry = [ 'jquery_003.js', 'jquery-ui.js',

'jquery_002.js', 'jquery_004.js', 'responsiveslides.js', 'password.js', 'jquery_005.js', 'jquery_009.js', 'jquery_007.js', 'jquery.js', 'scroll.js', 'slicker.js', ];

CSS_Registry = CSS_Registry.map(function(curr_path){ return _DEV_PATH_+curr_path;

});

JS_Registry = JS_Registry.map(function(curr_path){ return _DEV_PATH_+curr_path;

});

var Config = { // Task configuration. concat: { css: { src: CSS_Registry, dest: CSS_BUILD }, js: { src: JS_Registry, dest: JS_BUILD } }, cssmin: { combine: { options: { keepSpecialComments: 0, }, files: {} } }, uglify: { dist: { src: JS_BUILD, dest: JS_BUILD } } };

Config.cssmin[CSS_BUILD_MIN] = CSS_BUILD; // Project configuration.

grunt.initConfig(Config);

// These plugins provide necessary tasks. grunt.loadNpmTasks('grunt-contrib-concat'); grunt.loadNpmTasks('grunt-contrib-cssmin'); grunt.loadNpmTasks('grunt-contrib-uglify'); // Default task.

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

Tampilan Webite Perpustakaan Universitas Sanata Dharma

Berikut ini merupakan tampilan dari hasil inspect element. Yang menampilkan jumlah Request dan Paket Data dan aset-aset yang terdapat didalam website.

Gambar. Jumlah Request dan Paket Data Awal PLAGIAT MERUPAKAN TINDAKAN TIDAK TERPUJI

Gambar Request dan Paket Data setelah Dikompresi

Gambar. Aset CSS setelah Dikompresi

Gambar. Aset JavaScript sebelum Dikompresi PLAGIAT MERUPAKAN TINDAKAN TIDAK TERPUJI

Gambar. Aset JavaScript setelah Dikompresi

Source konfigurasi Grunt pada File Gruntfile.js

/*global module:false*/

module.exports = function(grunt) {

const _DEV_PATH_ = './themes/usd/files/'; const _PUBLIC_PATH_ = './themes/usd/assets/';

const CSS_BUILD = _PUBLIC_PATH_+'css/themes.css';

const CSS_BUILD_MIN = _PUBLIC_PATH_+'css/themes.min.css'; const JS_BUILD = _PUBLIC_PATH_+'js/themes.js';

var CSS_Registry = [ 'jquery-ui.css', 'bootstrap.css', 'responsiveslides.css', 'responsiveslides-2.css', 'jquery_002.css', 'jquery.css', 'template.css', 'PwdStyles.css', 'menu.css', ];

var JS_Registry = [ 'jquery_003.js', 'jquery-ui.js',

'jquery_002.js', 'jquery_004.js', 'responsiveslides.js', 'password.js', 'jquery_005.js', 'jquery_009.js', 'jquery_007.js', 'jquery.js', 'scroll.js', 'slicker.js', ];

CSS_Registry = CSS_Registry.map(function(curr_path){ return _DEV_PATH_+curr_path;

});

JS_Registry = JS_Registry.map(function(curr_path){ return _DEV_PATH_+curr_path;

});

var Config = { // Task configuration. concat: { css: { src: CSS_Registry, dest: CSS_BUILD }, js: { src: JS_Registry, dest: JS_BUILD } }, cssmin: { combine: { options: { keepSpecialComments: 0, }, files: {} } }, uglify: { dist: { src: JS_BUILD, dest: JS_BUILD } } };

Config.cssmin[CSS_BUILD_MIN] = CSS_BUILD; // Project configuration.

grunt.initConfig(Config);

// These plugins provide necessary tasks. grunt.loadNpmTasks('grunt-contrib-concat'); grunt.loadNpmTasks('grunt-contrib-cssmin'); grunt.loadNpmTasks('grunt-contrib-uglify'); // Default task.

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