Menggunakan PostCSS untuk Minifikasi dan Optimasi

Indonesian (Bahasa Indonesia) translation by Andy Nur (you can also view the original English article)

Pada tutorial terakhir, kamu telah belajar cara menggunakan PostCSS untuk membantu membuat stylesheet-mu lebih kompatibel dengan lintas browser, khususnya menangani masalah yang timbul dari dukungan untuk versi lama IE.

Pada tutorial ini, kita akan belajar cara membuat stylesheet-mu lebih efisien dan termuat lebih cepat, dengan menggunakan PostCSS untuk melakukan berbagai operasi minifikasi dan optimasi.

Kamu akan belajar caranya:

Menggabungkan beberapa stylesheet menjadi satu melalui rule @import, meskipun beberapa stylesheet mu berasal dari komponen Bower atau modul npm, pastikan kamu hanya perlu satu permintaan http untuk memuat CSS situsmu.
Menggabungkan media query yang cocok menjadi satu, memungkinkanmu menggunakan media query yang sama di beberapa lokasi selama pengembangan tetapi masih berakhir dengan efisiensi query yang terkonsolidasi di stylesheet akhirmu.
Menggunakan paket cssnano untuk melakukan semua jenis pengoptimalan dari menghilangkan spasi kosong dan komentar untuk mengecilkan jenis kode tertentu dan banyak lagi.

Mari kita mulai!

Menyiapkan Proyekmu

Hal pertama yang perlu kamu lakukan adalah mengatur proyekmu untuk menggunakan Gulp atau Grunt, tergantung pada preferensimu. Jika kamu belum memiliki preferensi untuk satu atau yang lainnya, saya sarankan menggunakan Gulp karena kamu akan membutuhkan lebih sedikit kode untuk mencapai tujuan yang sama, jadi kamu akan merasa lebih mudah untuk menggunakannya.

Kamu dapat membaca tentang cara menyiapkan proyek Gulp atau Grunt untuk PostCSS di tutorial sebelumnya

masing-masing.

Jika kamu tidak ingin secara manual mengatur proyekmu dari awal, kamu dapat mengunduh file sumber yang dilampirkan pada tutorial ini, dan mengekstrak proyek permulaan Gulp atau Grunt yang tersedia, ke dalam folder proyek kosong. Kemudian dengan terminal atau command prompt yang menunjuk pada foldernya, jalankan perintah npm install.

Menginstal Plugin

Untuk tutorial ini, kita akan menggunakan dua plugin individual, ditambah paket plugin. Instal dengan menjalankan perintah berikut di dalam folder proyekmu:

1	npm install postcss-import css-mqpacker cssnano --save-dev

Sekarang plugin telah dipasang, mari lanjutkan dan masukkan ke dalam proyekmu.

Memuat Plugin melalui Gulp

Jika kamu menggunakan Gulp, tambahkan variabel-variabel ini di bawah variabel yang sudah ada dalam file:

1	var atImport = require('postcss-import');
2	var mqpacker = require('css-mqpacker');
3	var cssnano = require('cssnano');

Sekarang tambahkan masing-masing nama variabel baru ke dalam array processor mu:

    var processors = [
  	atImport,
		mqpacker,
		cssnano
	];

Lakukan tes cepat agar semuanya bekerja dengan menjalankan perintah gulp css kemudian periksa bahwa sebuah file "style.css" baru telah muncul di folder "dest" proyekmu.

Memuat Plugin melalui Grunt

Jika kamu menggunakan Grunt, perbarui objek processors, yang bersarang di bawah objek options, ke yang berikut:

        processors: [
          require('postcss-import')(),
          require('css-mqpacker')(),
          require('cssnano')()
        ]

Lakukan tes cepat agar semuanya bekerja dengan menjalankan perintah grunt postcss kemudian periksa bahwa sebuah file "style.css" baru telah muncul di folder "dest" proyekmu.

Semua plugin telah dipasang dan dimuat, jadi mari kita pelajari cara menggunakannya untuk minifikasi dan optimasi.

Inline/Menggabungkan File dengan @import

Daripada memuat beberapa stylesheet secara individual, akan lebih efisien jika memungkinkan untuk menggabungkan stylesheet-mu menjadi satu.

Sebagai contoh, penggunaan Normalize.css yang sangat umum, tetapi, jika kamu memuatnya sebagai stylesheet yang berdiri sendiri sebelum stylesheet utamamu, diperlukan beberapa permintaan http, sehingga memperlambat waktu buka.

Namun jika kamu menggunakan plugin postcss-import oleh Maxime Thirouin, kamu dapat menggabungkan Normalize.css ke stylesheet utamamu, melalui penggunaan rule @import, yang memberikanmu CSS yang sama hanya dengan satu permintaan http.

@import kemudian Inline Normalize.css

Mari lanjutkan dan lakukan ini sekarang, impor dan kemudian masukkan Normalize.css ke dalam stylesheet proyek kita. Mulai dengan mengunduh "normalize.css" ke dalam folder "src" proyekmu, dari https://necolas.github.io/normalize.css/

Di bagian atas file "src/style.css" mu tambahkan baris berikut:

1	@import 'normalize.css';

Karena kamu sudah memasang postcss-import, hanya itu yang harus kamu lakukan. Ini akan melihat rule @import dan secara otomatis menyisipkan kode dari file normalize.css ke stylesheet-mu.

Kompilasi file-mu, dan ketika kamu melihat file "dest/style.css" mu kamu akan melihat seluruh isi dari "normalize.css" di dalamnya:

1	/! normalize.css v3.0.2 \| MIT License \| git.io/normalize /html{font-family:sans-serif;.......

Kamu dapat menggunakan proses yang sama ini untuk menggabungkan banyak stylesheet terpisah sesuai kebutuhanmu. Cukup tempatkan baris @import di file "src/style.css" mu dimanapun kamu ingin kode inline disisipkan.

Komponen Bower Otomatis dan Penemuan Modul Node

Salah satu fitur yang sangat membantu dari plugin ini adalah kemampuannya untuk secara otomatis menemukan file CSS yang terletak di dalam folder "bower_components" atau "node_modules" mu.

Misalnya, daripada mengunduh "normalize.css" secara manual seperti yang kita lakukan di atas, kamu malah dapat menjalankan perintah bower install normalize.css --save dalam proyek Anda. Ini akan secara otomatis mengunduh file "normalize.css" terbaru ke dalam folder "bower_components/normalize.css" .

Catatan: Jika kamu tidak memiliki pengaturan Bower di komputermu, pelajari caranya di sini.

Di bagian atas stylesheet-mu, sekarang kamu dapat menggunakan baris ini:

1	@import 'normalize.css/normalize.css';

Plugin postcss-import akan melihat ke dalam folder "bower_components"-mu dan mencari "normalize.css", kemudian dilanjutkan ke inline seperti pada contoh sebelumnya.

Proses yang sama dapat diikuti untuk setiap stylesheet yang ada di folder "node_modules"-mu, yang berarti kamu dapat menggunakan Bower atau npm untuk menangani unduhan, manajemen dependensi, dan pembaruan. Saat menggunakan layanan ini, plugin ini memberimu cara mudah menggabungkan file CSS pihak ketiga ke stylesheet-mu sendiri.

Cara Memanfaatkan Pembarisan @import

Membariskan file CSS yang diimpor dengan cara ini bukan hanya cara yang sangat efisien untuk menggabungkan file dari sumber yang berbeda, seperti komponen Bower, itu juga memberimu pilihan untuk mengatur proyekmu menjadi beberapa stylesheet yang terpisah.

Misalnya, kamu dapat membuat satu file untuk mengontrol tata letakmu, dan yang lain untuk mengontrol skema warnamu. Jika kamu ingin mengubah skema warnamu, kamu dapat mengikuti proses seperti ini:

Menduplikasi warna asli stylesheet
Memodifikasinya dengan kode warna baru
Mengimpor stylesheet warna baru ke dalam proyekmu
Mengkompilasi untuk membuat warna alternatif stylesheet

Kamu kemudian dapat mengulangi proses ini sebanyak yang kamu inginkan, membuatnya efisien untuk membuat beberapa skema warna untuk desain yang sama.

Beberapa proyek menggunakan stylesheet terpisah untuk menyediakan beberapa skema warna seperti ini, tetapi dalam prosesnya membuat keterlambatan dari permintaan http yang ditambahkan. Dengan pendekatan ini kamu selalu berakhir hanya dengan satu permintaan http saja, meskipun memiliki banyak kebebasan dalam apa yang mungkin dimasukkan dalam stylesheet tunggalmu.

Baca lebih lanjut tentang postcss-import di: https://github.com/postcss/postcss-import

Menggabungkan Media Query Yang Sesuai

Plugin css-mqpacker oleh Kyo Nagashima akan mencari media query yang cocok dalam stylesheet-mu dan menggabungkannya menjadi satu. Ini memungkinkanmu untuk mengatur CSS-mu seperti yang kamu inginkan di stylesheet pengembanganmu, mengulangi media query jika kamu butuh, tanpa khawatir atas hilangnya efisiensi di stylesheet produksimu.

Mari susun suatu contoh jenis kasus penggunaan di mana kamu mungkin ingin mengulang media query, seperti jika kamu mengatur tata letak dan visual desain secara terpisah. Pada proyek yang nyata, ini mungkin berarti menggunakan file yang benar-benar terpisah, satu untuk tata letak dan satu untuk visual, tapi demi kesederhanaan kita akan melakukan ini semua di file "src/style.css" kita .

Kami akan mulai dengan beberapa kode tata letak. Kita akan menambahkan class .column yang akan membuat dua kolom dengan lebar 50% yang duduk berdampingan, secara default. Lalu, kita akan menggunakan media query agar menumpuk satu sama lain pada ukuran yang lebih kecil. Tambahkan kode ini ke stylesheet-mu:

/* LAYOUT */

.column {
    width: 50%;
	float: left;
}

@media (max-width: 50rem) {
	.column {
		width: 100%;
		float: none;
	}
}

Selanjutnya, kita akan menambahkan beberapa visual untuk menetapkan border abu-abu di sekitar kolom kita. Kolom pertama akan memiliki class .column_one dan yang kedua akan memiliki class .column_two. Kita akan menggunakan media query yang sama seperti yang kita lakukan dengan tata letak kita untuk mengubah cara kita menerapkan batas ke kolom, tergantung pada apakah mereka duduk berdampingan atau satu di atas yang lainnya.

Tambahkan kode ini ke stylesheet-mu juga:

/* VISUALS */

.column_one, .column_two {
    border: 0.0625rem solid #ccc;
}

.column_two {
	border-left: 0;
}

@media (max-width: 50rem) {
	.column_one, .column_two {
		border: 0.0625rem solid #ccc;
	}

	.column_two {
		border-top: 0;
	}
}

Sekarang, kompilasi ulang file "src/style.css" mu file dan lihatlah konten "dest/style.css" yang dihasilkan .

Seperti yang kamu lihat pada kode di bawah ini, plugin css-mqpacker telah mengidentifikasi dua media query yang cocok, dan menggabungkannya menjadi satu:

/* LAYOUT */

.column {
    width: 50%;
	float: left;
}

/* VISUALS */

.column_one, .column_two {
	border: 0.0625rem solid #ccc;
}

.column_two {
	border-left: 0;
}

@media (max-width: 50rem) {

	.column {
		width: 100%;
		float: none;
	}

	.column_one, .column_two {
		border: 0.0625rem solid #ccc;
	}

	.column_two {
		border-top: 0;
	}
}

Catatan: Kode di atas akan diperkecil di file "dest / style.css" mu karena plugin cssnano. Untuk melihat kode yang tidak diminifikasi, beri komentar sementara pada cssnano dari array processors Gulpfile atau Gruntfile mu.

Baca lebih lanjut mengenai css-mqpacker di https://github.com/hail2u/node-css-mqpacker

Paket Plugin cssnano

Untuk optimasi CSS yang komprehensif dan beraneka ragam, paket cssnano oleh Ben Briggs adalah opsi yang sangat kuat, namun cukup sempurna. Ini menyatukan sekitar dua puluh lima plugin, dan dapat melakukan sejumlah jenis pengoptimalan yang mengesankan.

Di antara daftar panjang pengoptimalan, itu bisa:

Menghapus spasi kosong dan titik koma akhir
Menghapus komentar
Mengoptimalkan beban font
Membuang aturan duplikat
Mengoptimalkan penggunaan calc()
Mengecilkan selektor
Meminimalkan properti longhand
Menggabungkan aturan

Kita akan memproses beberapa kode contoh dalam proyekmu yang akan melihat semua penerapan optimasi di atas.

Tambahkan kode ini ke file "src/style.css" mu :

.css_nano, .css_nano + p, [class*="css_nano"], .css_nano {
    /* This is an example of cssnano in action */
	font-weight: normal;
	margin-top: 1rem;
	margin-bottom: 2rem;
	margin-left: 1.5rem;
	margin-right: 2.5rem;
	font-weight: normal;
	padding: 1.75rem;
	width: calc(50rem - (2 * 1.75rem));
}

a {
	text-decoration: none;
	font-weight: bold;
}

p {
	font-weight: bold;
}

Kemudian kompilasi ulang file-mu.

Catatan: Kamu mungkin ingin mengomentari kode apa pun yang sudah kamu miliki, sehingga kamu dapat dengan jelas melihat hasilnya.

Dalam file "dest/style.css" seharusnya sekarang kamu akan melihat kode yang sudah dioptimasi:

1	.css_nano,.css_nano+p,[class*=css_nano]{margin:1rem 2.5rem 2rem 1.5rem;font-weight:400;padding:1.75rem;width:46.5rem}a{text-decoration:none}a,p{font-weight:700}

Lihatlah daftar optimasi yang disebutkan di daftar butir di atas, lalu bandingkan kode contoh sebelum dan sesudah kompilasi untuk melihat bagaimana masing-masing perubahan ini terjadi:

Spasi kosong, komentar, dan titik koma akhir hilang
font-weight: normal dan font-weight: bold dikonversi ke font-weight: 400 dan font-weight: 700
Yang kedua, instance yang berulang dari rule font-weight: normal; telah dihapus dari style .css_nano
Properti calc() telah direduksi menjadi nilai statis
Selektor .css_nano, .css_nano + p, [class*="css_nano"], .css_nano telah diminifikasi ke .css_nano,.css_nano+p,[class*=css_nano]
Properti longhand margin-top: 1rem; margin-bottom: 2rem; margin-left: 1.5rem; margin-right: 2.5rem; telah di reduksi menjadi margin:1rem 2.5rem 2rem 1.5rem;
Style a dan p telah digabungkan untuk berbagi pengaturan font-weight: 700; yang umum

Untuk daftar lengkap pengoptimalan, cssnano menyediakannya, periksa: http://cssnano.co/optimisations/

Mengkonfigurasi Opsi dan Menonaktifkan Modul

Ada beberapa plugin independen yang digunakan oleh paket cssnano, dan kamu mungkin ingin mengonfigurasi pengaturan untuknya, atau sepenuhnya menonaktifkan sebagian darinya.

Untuk menonaktifkan plugin, berikan namanya dalam opsimu untuk cssnano dengan memakai pengaturan "false". Misalnya, jika kamu tidak ingin mengoptimalkan font weight, atur hal berikut di Gulpfile/Gruntfile mu:

// In Gulpfile 'processors' array
cssnano({
    minifyFontWeight: false
})

// In Gruntfile 'processors' array
require('cssnano')({
    minifyFontWeight: false
})

Kamu dapat mengikuti pendekatan yang sama untuk mengonfigurasi opsi untuk plugin, memberi nama plugin terlebih dahulu lalu mengatur opsinya.

Misalnya, kamu dapat mengatur ketepatan, (jumlah tempat desimal), plugin calc yang harus digunakan. Secara default cal(100% / 2,76) akan memberimu 36,23188%. Tetapi jika kamu ingin memangkas presisi itu menjadi dua desimal, kamu dapat melakukannya seperti ini:

// In Gulpfile 'processors' array
cssnano({
    calc: {precision: 2}
})

// In Gruntfile 'processors' array
require('cssnano')({
    calc: {precision: 2}
})

Nilai calc sekarang akan menghasilkan hingga 36.23%.

Untuk info lebih lanjut tentang cssnano, kunjungi: http://cssnano.co/options

Rekap Cepat

Mari kita miliki laporan dari apa yang kita bahas di atas:

Plugin postcss-import memberimu cara yang efisien untuk inline stylesheet.
Ini dapat digunakan untuk menggabungkan stylesheet pihak ketiga, termasuk melalui penemuan otomatis di folder "bower_components" atau "npm_modules" mu.
Ini dapat digunakan untuk memungkinkanmu membagi stylesheet menjadi beberapa bagian, kemudian menggabungkannya kembali nanti.
Plugin css-mqpacker memungkinkanmu untuk menggandakan media query sehingga kamu dapat mengatur CSS-mu seperti yang di inginkan, termasuk ke dalam file terpisah, dan kemudian memiliki semua media query yang cocok digabungkan dalam stylesheet akhirmu.
Paket cssnano menyatukan sekitar 25 plugin yang berbeda, memberikan akses yang cukup sempurna ke daftar panjang fungsi minifikasi dan optimasi.
Ini dapat dikonfigurasi untuk menggunakan plugin apa pun yang kamu inginkan, dengan opsi yang kamu inginkan.

Berikutnya: Preprocessing dengan PreCSS

Pada tutorial berikutnya, kita akan menggunakan PostCSS untuk preproses melalui paket plugin yang luar biasa, yang bernama PreCSS. Paket ini memberikan akses langsung ke sintaks dan fungsi seperti Sass, dengan variabel, mixin, conditional, etends dan banyak lagi.

Sampai jumpa di tutorial selanjutnya!