🖼️ Bedah Skrip generate-icons.js

Bikin Ikon PWA & Manifest Otomatis dari SVG!

🎯 Buat Apa Sih Skrip Ini?

Pernah ribet bikin ikon website satu-satu buat macem-macem ukuran? Nah, skrip Node.js generate-icons.js ini datang sebagai penyelamat! 🦸♂️

Tujuan utamanya adalah membuat berbagai ukuran ikon (format .png) yang kamu butuhin buat Progressive Web App (PWA) dan buat perangkat Apple (iOS), semuanya otomatis dari satu file master SVG (gambar vektor).

Tidak cuma itu, skrip ini juga sekalian bikin file site.webmanifest, yaitu file 'KTP'-nya PWA kamu, lengkap dengan daftar ikon-ikon yang barusan dibuat. Praktis banget!

🔎 Gimana Cara Kerjanya?

Skrip ini pakai beberapa 'jurus' Node.js buat menyelesaikan tugasnya:

Siap-siap (Impor Modul & Info Penting):
- Manggil sharp: Ini 'jagoan' buat ngolah gambar di Node.js. Dia bisa ubah ukuran, ganti format, dll, dengan cepat.
- Manggil fs: Ini 'tukang'-nya Node.js buat urusan baca tulis file dan folder.
- Nyiapin info penting: Path file SVG master (ext/icon-master.svg), nama folder output (ext/icons), nama file manifest (site.webmanifest), daftar ukuran ikon PWA standar (48, 72, ..., 1024), dan ukuran khusus buat Apple (180).
Pastikan 'Rumah' Ikon Siap (Folder Output):
Skrip ini ngecek dulu, "Folder ext/icons udah ada belum?". Kalau belum, dia langsung bikinin foldernya biar ikon-ikon nanti ada tempatnya.
Cetak Ikon PWA (Pakai sharp):
Ini bagian serunya. Skrip ini ngulang proses buat tiap ukuran di daftar ukuran PWA:
- Ambil SVG master pakai sharp(master).
- Ubah ukurannya jadi pas (misal 192x192) pakai .resize(size, size).
- Simpan hasilnya jadi file PNG (icon-192x192.png) di folder ext/icons pakai .toFile(...).
- Kasih kabar di console kalau satu ikon udah jadi (✔ icon-192x192.png dibuat).
Proses ini jalan barengan buat semua ukuran (pakai Promise) biar lebih cepet.
Cetak Ikon Spesial Apple (Pakai sharp):
Mirip kayak tadi, tapi ini khusus buat bikin ikon apple-touch-icon ukuran 180x180 (apple-icon-180x180.png).
Tunggu Semua Beres & Bikin 'KTP' PWA (Manifest):
- Skrip ini sabar nungguin semua proses cetak ikon selesai (pakai Promise.all).
- Kalau semua ikon udah jadi, baru deh dia lanjut bikin file manifest:
- Bikin daftar ikon: Ngumpulin path dan ukuran semua ikon PWA yang tadi dibuat jadi format yang dimengerti file manifest.
- Bikin 'KTP' PWA (manifest): Nulis info dasar PWA kamu (nama aplikasi, nama pendek, halaman awal, tampilan, warna background & tema) plus daftar ikon tadi.
- Tulis ke File: Nyimpen semua info 'KTP' itu jadi file site.webmanifest dalam format JSON yang rapi.
- Kasih info tambahan: Ngasih tau kamu contoh tag <link> yang perlu dipasang di HTML buat ikon Apple.
Kalau Ada Masalah (Error Handling):
Kalau pas lagi cetak ikon ada yang gagal (misal file SVG masternya tidak ketemu), skrip ini bakal ngasih tau errornya di console.

✨ Fitur Kerennya Apa Aja?

Serba Otomatis: Gak perlu lagi bikin ikon satu-satu manual. Jalankan skrip, semua ukuran langsung jadi!
Standar PWA & Apple: Ukuran ikon yang dibuat udah sesuai standar umum PWA dan kebutuhan iOS.
Manifest Instan: File site.webmanifest otomatis dibuat atau di-update, siap pakai buat PWA kamu.
Ngebut Pakai Sharp: Proses ubah ukuran gambarnya cepet karena pakai pustaka sharp.
Kerja Barengan: Pembuatan ikon dijalankan paralel, jadi lebih efisien waktu.
Siap Pakai Buat iOS: Langsung dikasih tau tag <link> buat ikon Apple, tinggal copy-paste.
Persiapan Matang: Folder output otomatis dibuat kalau belum ada.

Pokoknya, generate-icons.js ini tool wajib buat developer web yang mau bikin PWA atau sekadar pengen ikon websitenya tampil cakep di mana-mana, tanpa ribet.

🚀 Mau Coba Lihat Kodenya?

Kamu bisa lihat dan ambil kode lengkap skrip generate-icons.js ini langsung dari repositori GitHub:

Lihat generate-icons.js di GitHub

Pastikan kamu udah install Node.js dan pustaka sharp (npm install sharp atau yarn add sharp) di proyekmu. Siapkan juga file ext/icon-master.svg, lalu jalankan skrip ini pakai node ext/generate-icons.js.