{"id":11258,"date":"2019-04-19T00:00:00","date_gmt":"2019-04-19T00:00:00","guid":{"rendered":"https:\/\/binus.ac.id\/binus-digital\/2019\/04\/19\/minifikasi-kode-css-dan-javascript-menggunakan-gruntjs\/"},"modified":"2024-09-24T02:20:29","modified_gmt":"2024-09-24T02:20:29","slug":"minifikasi-kode-css-dan-javascript-menggunakan-gruntjs","status":"publish","type":"post","link":"https:\/\/binus.ac.id\/binus-digital\/2019\/04\/19\/minifikasi-kode-css-dan-javascript-menggunakan-gruntjs\/","title":{"rendered":"Minifikasi Kode CSS dan JavaScript menggunakan GruntJS"},"content":{"rendered":"

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

https:\/\/developers.google.com\/speed\/docs\/insights\/MinifyResources?hl=id<\/a><\/p>\n

Minifikasi (kode) adalah salah satu cara developer website untuk mempercepat load website saat diakses oleh user. Dengan mempercepat performance website, dapat meningkatkan User Experience<\/em>. Beberapa website malah dapat menaikkan traffic<\/em> website mereka.<\/span><\/p>\n

https:\/\/developers.google.com\/web\/fundamentals\/performance\/why-performance-matters<\/a><\/p>\n

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

Install GruntJS<\/h3>\n

Sebelum meng-<\/span>install<\/span><\/i> GruntJS, pastikan kamu sudah meng-install<\/em> NodeJS terlebih dahulu. Kamu bisa download installer<\/em>-nya disini:
<\/span>https:\/\/nodejs.org\/en\/<\/a><\/p>\n

Untuk mengetahui bahwa NodeJS berhasil ter-install<\/em> adalah dengan cara membuka Terminal<\/em> atau Command Prompt<\/em>, lalu ketik perintah \u201cnpm -v<\/strong>\u201d. Jika tampil versi dari NodeJS nya maka proses instalasi telah berhasil.<\/span><\/p>\n

\"\"<\/p>\n

Jika NodeJS sudah ter-install<\/em>, lanjutkan dengan meng-install<\/em> GruntJS. Caranya adalah sebagai berikut:<\/span><\/p>\n

    \n
  1. Buka terminal (MacOS) atau command prompt (Windows, sebagai administrator<\/em>).<\/span><\/li>\n
  2. Lalu ketik perintah berikut: \u201cnpm install -g grunt-cli<\/strong>\u201d.<\/span><\/li>\n
  3. Setelah proses selesai, ketik perintah \u201cgrunt -V<\/strong>\u201d untuk mengecek apakah GruntJS sudah berhasil ter-install<\/em>.<\/span><\/li>\n<\/ol>\n

    \"\"<\/p>\n

    Atau bisa dilihat di website resminya <\/span>https:\/\/gruntjs.com\/getting-started<\/span><\/a>.<\/span><\/p>\n

    Buat Proyek Baru<\/h3>\n

    Sampai sini saya pastikan kamu sudah berhasil meng-install<\/em> GruntJS. Sekarang saatnya mencoba membuat proyek sederhana menggunakan GruntJS untuk melakukan proses minifikasi kode CSS dan JavaScript.<\/span><\/p>\n

    Silahkan kamu buat folder baru, bisa diberi nama \u201cgruntjs-example<\/strong>\u201d atau penamaan lainnya. Setelah itu kita buat folder baru di dalam folder tersebut, diberi nama \u201ccss<\/strong>\u201d untuk menyimpan file CSS yang sudah kamu buat. Lalu buat file CSS baru dan diberi nama misalnya \u201cstyle.css<\/strong>\u201d dan ketik kode berikut: (Hanya contoh, kamu bisa menggunakan kode kamu sendiri)<\/span><\/p>\n

    \n
    *<\/strong> {
     -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
     box-sizing: border-box;
    }

    html<\/strong> {
    font-size: 10px;
    }

    body<\/strong> {
    margin: 0;
    padding: 0;
    font-size: 1.6rem;
    color: #fff;
    line-height: 1.6;
    background-color: #f2f2f2;
    }<\/pre>\n
    \u00a0<\/div>\n<\/div>\n
    Setelah itu kita buat folder baru lagi di dalam folder \u201cgruntjs-example<\/strong>\u201d, beri nama dengan \u201cjs<\/strong>\u201d untuk menyimpan file JavaScript yang sudah kamu buat. Lalu buat file JavaScript baru dan beri nama misalnya \u201cscript.js<\/strong>\u201d dan ketik kode berikut: (Hanya contoh, kamu bisa menggunakan kode kamu sendiri)<\/span><\/p>\n
    \n
    var number_one = 5;
    var number_two = 10;
    var total = number_one + number_two;
    console.log(total);<\/pre>\n<\/div>\n
    Terakhir sebelum membuat perintah, kamu memerlukan file package.json<\/strong> untuk mendeskripsikan proyek yang dibuat serta mencatat module<\/em> (dependencies & dev dependencies<\/em>) yang dibutuhkan oleh proyek kamu. Caranya ketik perintah berikut pada Terminal. (Pastikan lokasi Terminal kamu sudah berada didalam folder “gruntjs-example”)<\/span><\/p>\n
    cd gruntjs-example
    <\/span><\/i>npm init<\/span><\/i><\/pre>\n
    Setelah itu akan muncul form yang harus kamu isi. Kamu bisa tekan tombol “Enter” sampai selesai untuk konfigurasi default<\/em>.<\/p>\n
    \"\"<\/p>\n
    Jika sudah selesai akan muncul file baru dengan nama “package.json<\/strong>“.<\/p>\n
    Buat Perintah<\/h3>\n
    Sebelum membuat perintah, kamu perlu install<\/em> terlebih dahulu module-module<\/em> yang dibutuhkan untuk menjalankan perintah. Berikut module<\/em> yang kamu butuhkan:<\/span><\/p>\n