KAJIAN TEKNOLOGI WEB ASET GRUNT PADA WEBSITE PERPUSTAKAAN UNIVERSITAS SANATA DHARMA

PLAGIAT MERUPAKAN TINDAKAN TIDAK TERPUJI

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 2016 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 i


ii


iii


LEMBAR MOTTO

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

iv


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

Nicodimus Dwiyanto Rahmahadi

v


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.

vi


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

vii


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,

Nicodimus Dwiyanto Rahmahadi viii


KATA PENGANTAR

Syukur kepada Tuhan Yang Maha Esa atas segala berkat dan bimbinganNya, 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.

ix


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

Yogyakarta, 20 Juli 2016

Penulis

x


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 .........……………………………………..... 2.1

2.2

7

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

Web Aset………….........................................……………………. xi

13


2.3

Node Package Module……….. .......……………………………... 2.3.1 Grunt…….........................................………………………...

14 14

BAB III METODOLOGI PENELITIAN ………………………….............

16

3.1.

Subjek Dan Objek Penelitian...………………...................................

16

3.2.

Penelitian Kepustakaan…………. ………………………………….

16

3.2.1. Studi Kepustakaan…….........................................………….

16

3.2.2. Pengumpulan Data……………... ..........................................

17

3.2.3. Menyajikan Data Hasil Penerapan……..................................

17

Implementasi ……..........….………………………………………..

18

3.3.1. Grunt version 0.4.5………………………..……………........

18

3.3.2. JetBrains PhpStorm 9.0.2.…………………………...............

18

3.3.3. Xampp version 2.1…………………………………………..

19

3.3.4. Devtool Chrome…………………………………………….

19

Analisis Hasil Pengujian…………………………………………….

20

3.3.

3.4

BAB IV IMPLEMENTASI DAN ANALISA HASIL………………......... 4.1.

21

Analisis Data Website Perpustakaan Universitas Sanata Dharma....................................................................................

21

4.2. Implementasi Grunt dan Pembahasan………………………...

26

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

29

BAB V PENUTUP ………….......................................................................

34

5.1 Kesimpulan ………….................................................................

34

5.2 Saran ...........................................................................................

35

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

xii


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

Gambar (4-7) :Menjalankan Grunt………………............................................

27

xiii


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

Tabel (4-8) : Hasil Waktu Data Transfer pada Aset JS dan CSS……............

32

xiv


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.

1

PLAGIAT MERUPAKAN TINDAKAN TIDAK TERPUJI 2

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.




1.5

Pengujian dilakukan secara offline. (localhost)

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.


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 multimedia (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).

7


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 c. Content : isi dari 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

implementasikan dalam pembuatan program atau app. Dimana

di-

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

mendaftarkan plugins. (gruntjs.com)

dan

mendefinisikan

tugas

serta


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.

16


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.


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.

21


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.

Gambar 4.2 Tampilan Inspect Element Devtool Chrome


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


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.

Gambar 4.7. Menjalankan Grunt


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 Jumlah request dari css dan js sebanyak 59 request.

sebanyak 40 request.

Jumlah data transfer sebesar 2.1 MB

Jumlah data transfer sebesar 1.5 MB

Aset-aset

dari

css

masih

belum Aset-aset dari css sudah mengalami

dikompresi sehingga terdapat banyak kompresi sehingga file berkurang file berupa aset, seperti jquery-ui.css, dan bootstrap.css, PwdStyles.css dsb

menjadi

themes.css

1

file

kompresi


Sebelum dilakukan kompresi

Sesudah dilakukan kompresi

Pada aset-aset js juga masih banyak Setelah dilakukan kompresi seluruh file aset js. Seperti jquery_003.js, aset dikompresi kedalam 1 aset yaitu jquery-ui.js, slicker.js, password.js, themes.js responsiveslides.js dsb.

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

Web Aset (JavaScript)

Web Aset (CSS)

Jquery_003.js

(267 kb) Jquery-ui.css

Jquery-ui.js

(451 kb)

(32.5 kb)

Bootstrap.css

(101 kb)

Jquery_002.js

(2.7 kb) Template.css

(79.3 kb)

Password.js

(1.3 kb) pwdStyles.css

Slicker.js

(1.2 kb) Menu.css

(4.1 kb)

Jquery_004.js

(2.3 kb) Responsiveslides-2.css

(2.9 kb)

(12 kb) Responsiveslides.css

(837 b)

Responsiveslides.js

(966 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

Jquery.js

(8.3 kb)

Scroll.js

(1.7 kb)

TOTAL

811.8 kb

Tabel 4.6. Hasil Kompresi pada Aset JS dan CSS Web Aset (JavaScript) Themes.js

Web Aset (CSS)

(362 kb) Themes.min.css (181 kb)

229 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 362

Aset Javascript : (811.8) 𝑥100 = 44.59 % Aset CSS

181

:(

229

) 𝑥100 = 79.03 %

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 (CSS)

Jquery_003.js

(112 ms)

Jquery-ui.css

Jquery-ui.js

(132 ms) Bootstrap.css

Jquery_002.js

(96 ms) (221 ms)

(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)


(165 ms)

Jquery_005.js

(225 ms)

Jquery_002.css

(189 ms)



Web Aset (CSS)

Jquery_009.js

(242 ms)

Jquery.css

Jquery_007.js

(239 ms)

TOTAL

Jquery.js

(240 ms)

Scroll.js

(240 ms)

TOTAL

3210 ms

(96 ms) 1513 ms

Tabel 4.8. Hasil Waktu Data Transfer pada Aset JS dan CSS Web Aset (JavaScript)

Web Aset (CSS)

Themes.js

Themes.min.css (42 ms)

(103 ms)

Pada hasil perhitungan secara manual jumlah waktu data transfer dari asetaset 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 𝑧

(𝐴) 𝑥100 = ⋯ %

3210 – 103 = 3107 3107

(3210) 𝑥100 = 96.79 %


Aset CSS

:

B = Total waktu awal aset CSS y = total waktu setelah dilakukan kompresi CSS B–y=z

1513 – 42 = 1471

𝑧

(𝐵) 𝑥100 = ⋯ %

1471

(1513) 𝑥100 = 97.23 %

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. .


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 96.79 %

34

dan aset CSS


97.23 % 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 asetaset 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-lessframework-untuk-css/. Diakses pada tanggal 27 Agustus 2015 SASS

(Syntactically

Awesome

Stylesheets),

lang.com/documentation/file.SASS_REFERENCE.html.

http://sassDiakses

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 JShint


Gambar Cara menginstal modul cssmin

Gambar Cara menginstal modul 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


Gambar Request dan Paket Data setelah Dikompresi

Gambar. Aset pada CSS sebelum dikompresi


Gambar. Aset CSS setelah Dikompresi

Gambar. Aset JavaScript sebelum 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']); };

KAJIAN TEKNOLOGI WEB ASET GRUNT PADA WEBSITE PERPUSTAKAAN UNIVERSITAS SANATA DHARMA

Recommend Documents