Minifikasi Kode CSS dan JavaScript menggunakan GruntJS

Minifikasi adalah proses penghapusan data yang tidak penting atau tidak diperlukan tanpa memengaruhi cara pemrosesan resource oleh browser – misalnya, komentar kode dan pemformatan, penghapusan kode yang tidak digunakan, penggunaan variabel dan nama fungsi yang lebih pendek, dan lain-lain.

https://developers.google.com/speed/docs/insights/MinifyResources?hl=id

Minifikasi (kode) adalah salah satu cara developer website untuk mempercepat load website saat diakses oleh user. Dengan mempercepat performance website, dapat meningkatkan User Experience. Beberapa website malah dapat menaikkan traffic website mereka.

https://developers.google.com/web/fundamentals/performance/why-performance-matters

Salah satu tools untuk melakukan minifikasi kode adalah GruntJS. GruntJS adalah sebuah perintah untuk melakukan tugas yang bersifat repetitif atau berulang seperti minifikasi, kompilasi, unit testing, linting, dan lain-lain. Tujuannya adalah untuk otomatisasi beberapa tugas dalam satu perintah JavaScript.

Install GruntJS

Sebelum meng-install GruntJS, pastikan kamu sudah meng-install NodeJS terlebih dahulu. Kamu bisa download installer-nya disini:
https://nodejs.org/en/

Untuk mengetahui bahwa NodeJS berhasil ter-install adalah dengan cara membuka Terminal atau Command Prompt, lalu ketik perintah “npm -v”. Jika tampil versi dari NodeJS nya maka proses instalasi telah berhasil.

Jika NodeJS sudah ter-install, lanjutkan dengan meng-install GruntJS. Caranya adalah sebagai berikut:

1. Buka terminal (MacOS) atau command prompt (Windows, sebagai administrator).
2. Lalu ketik perintah berikut: “npm install -g grunt-cli”.
3. Setelah proses selesai, ketik perintah “grunt -V” untuk mengecek apakah GruntJS sudah berhasil ter-install.

Atau bisa dilihat di website resminya https://gruntjs.com/getting-started.

Buat Proyek Baru

Sampai sini saya pastikan kamu sudah berhasil meng-install GruntJS. Sekarang saatnya mencoba membuat proyek sederhana menggunakan GruntJS untuk melakukan proses minifikasi kode CSS dan JavaScript.

Silahkan kamu buat folder baru, bisa diberi nama “gruntjs-example” atau penamaan lainnya. Setelah itu kita buat folder baru di dalam folder tersebut, diberi nama “css” untuk menyimpan file CSS yang sudah kamu buat. Lalu buat file CSS baru dan diberi nama misalnya “style.css” dan ketik kode berikut: (Hanya contoh, kamu bisa menggunakan kode kamu sendiri)

* {
 -moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
 box-sizing: border-box;
}

html {
font-size: 10px;
}

body {
margin: 0;
padding: 0;
font-size: 1.6rem;
color: #fff;
line-height: 1.6;
background-color: #f2f2f2;
}

Setelah itu kita buat folder baru lagi di dalam folder “gruntjs-example”, beri nama dengan “js” untuk menyimpan file JavaScript yang sudah kamu buat. Lalu buat file JavaScript baru dan beri nama misalnya “script.js” dan ketik kode berikut: (Hanya contoh, kamu bisa menggunakan kode kamu sendiri)

var number_one = 5;
var number_two = 10;
var total = number_one + number_two;
console.log(total);

Terakhir sebelum membuat perintah, kamu memerlukan file package.json untuk mendeskripsikan proyek yang dibuat serta mencatat module (dependencies & dev dependencies) yang dibutuhkan oleh proyek kamu. Caranya ketik perintah berikut pada Terminal. (Pastikan lokasi Terminal kamu sudah berada didalam folder “gruntjs-example”)

cd gruntjs-example
npm init

Setelah itu akan muncul form yang harus kamu isi. Kamu bisa tekan tombol “Enter” sampai selesai untuk konfigurasi default.

Jika sudah selesai akan muncul file baru dengan nama “package.json“.

Buat Perintah

Sebelum membuat perintah, kamu perlu install terlebih dahulu module-module yang dibutuhkan untuk menjalankan perintah. Berikut module yang kamu butuhkan:

• Local Grunt.
• https://github.com/gruntjs/grunt-contrib-cssmin
• https://github.com/gruntjs/grunt-contrib-uglify

Untuk meng-install kedua module tersebut, kamu cukup mengetik kode berikut di terminal:

npm install --save-dev grunt grunt-contrib-cssmin grunt-contrib-uglify

Jika sudah, semua module yang baru di-install tersebut akan tercatat di file “package.json” yang sebelumnya sudah dibuat.

Selanjutnya adalah kamu perlu membuat file baru di dalam folder ”gruntjs-example”, dan beri nama dengan “Gruntfile.js” (nama file tidak boleh berbeda untuk file yang ini). File tersebut adalah file yang akan digunakan untuk menulis perintah.

Sekarang buka file “Gruntfile.js” lalu ketik kode berikut:

module.exports = (grunt) => {

/**
 * Project configuration.
*/
grunt.registerTask('code-minify', 'Minify CSS code and JS code.', () => {

/**
* Load NPM tasks.
*/
grunt.loadNpmTasks('grunt-contrib-cssmin')
grunt.loadNpmTasks('grunt-contrib-uglify')

/**
* Create configuration.
*/
grunt.initConfig({

/**
* Minify CSS code.
*/
cssmin: {
options: {
level: { 1: { specialComments:0 } }
},
main: {
files: [{
expand:true,
cwd:'css',
src:'style.css',
dest:'_dist/css',
ext:'.css'
}]
}
},

/**
* Minify JS code.
*/
uglify: {
main: {
files: [{
expand:true,
cwd:'js',
src:'script.js',
dest:'_dist/js'
}]
}
}
})

/**
* Run tasks.
*/
grunt.task.run(['cssmin', 'uglify'])
})
}

grunt code-minify