Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. CSS
Webdesign

Hilangkan CSS Yang Tidak Diperlukan Dengan PurifyCSS Dan Grunt

by
Difficulty:IntermediateLength:ShortLanguages:

Indonesian (Bahasa Indonesia) translation by Yosef Andreas (you can also view the original English article)

Dalam tutorial ini saya akan menunjukkan kepada kamu bagaimana menggunakan Grunt dan PurifyCSS untuk membuat stylesheet super ringan dengan usaha minimal. Kita akan menginstalnya, kemudian belajar bagaimana menjalankannya dengan dan tanpa Grunt, untuk memberikan kita lebih banyak tentang style yang berkinerja.

Tonton Screencast

PurifyCSS adalah sebuah tool JavaScript yang mengurai fiile markup (HTML, PHP, atau bahkan JavaScript) kemudian mereferensikan silang ke CSS apapun yang kamu gunakan. Tiap selector dalam CSS yang tidak sedang digunakan akan dihilangkan, meninggalkan hanya dengan style yang benar-benar kamu butuhkan.

Install

Untuk menginstal PurifyCSS kamu dapat mengambil repo secara langsung dari GitHub, atau menginstalnya via npm (lebih detail tentang bagaimana itu dilakukan via tutorial ini dari Kezz)

install via npm
Menginstal via npm

Demo Kami

File-file yang akan kita gunakan untuk mendemonstrasikan PurifyCSS adalah stylesheet Bootstrap lengkap dan sebuah index.html. Kamu dapat mengambilnya dari sumber repo. File index.html cukup langsung pada tujuan; hanya ada dua hero section, dengan beberapa tombol, elemen form, dan Bootstrap grid; kita tentunya tidak memerlukan keseluruhan library Bootstrap style.

bootstrap styles
Stylesheet Bootstrap lengkap

Menjalankan PurifyCSS

Untuk menjalankan PurifyCSS pada stylesheet ini, pergi ke command line prompt, navigasikan ke folder project dan jalankan sebuah command dengan di bawah ini:

  • Perintah purifycss untuk memulai semuanya
  • stylesheet sumber yang akan dibersihkan
  • file markup target, dalam kasus kita index.html
  • parameter opsional --min jika kita ingin hasil CSS dikecilkan (minified)
  • parameter opsional --out setelah yang dapat kita khususkan dimana kita ingin menyimpan file hasil
  • parameter opsional --info jika kita ingin proses dicatat pada terminal
  • dan parameter opsional --rejected yang, ketika dicantumkan, mencatat semua selector yang telah ditolakukan dari stylesheet sumber

Perintah akhir kita akan tampak seperti ini:

Hasil

Stylesheet sumber telah dipangkas dengan baik melebihi 100Kb, kerja bagus!

Menggunakan PurifyCSS Dengan Grunt

Untuk mengotomatisasi proses lebih jauh kita dapat menggunakan sebuah pelaksana tugas seperti Grunt. Kembali ke titik awal, kita perlu menambahkan sebuah package.json ke project kita. Menjalankan npm init dalam folder kita akan membawa kita melalui sebuah proses pembuatan package.json, secara esensial memberikan output sebuah file dengan detail sebagai berikut:

Kemiduan, jika kita belum memilikinya, kita perlu menginstal Grunt:

Dengan selesai itu kamu akan melihat sebuah folder "node_modules" telah ditambahkan ke dalam project.

Menginstal Plugin Grunt

Berikutnya kita perlu menginstal plugin Grunt untuk PurifyCSS.

Membuat Gruntfile

Sekarang kita perlu membuat sebuah file bernama gruntfile.js. Lihat pada file sumber untuk melihat apa yang terdapat dalam file ini, namun daya tarik khusus adalah tugas Grunt itu sendiri:

Pilihan dalam obyek target harus familiar denganmu dari latihan sebelumnya, dan dengan parameter yang ditentukan, file kita siap.

Untuk menjalankan Grunt, dalam terminal masukkan:

Kesimpulan

Dan kita selesai! Kita melihat pada dua pendekatan yang berbeda menggunakan PurifyCSS untuk membersihkan stylesheet. Jangan lupa: tidak ada artinya memiliki browser yang memuat berkilobytes style yang bahkan tidak digunakan, kinerja itu penting!

Sumber-Sumber Berguna

Lebih Jauh Tentang Grunt di Tuts+


Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.