Isi
Pelari tugas JavaScript seperti Grunt telah menjadi sangat populer di kalangan pengembang front-end. Ini karena mereka membantu melakukan satu hal yang kita semua ingin lakukan dalam pekerjaan kita - menghemat waktu!
Tetapi dengan lebih dari 5.000 (dan terus bertambah) plugin Grunt yang sekarang tersedia, akan sulit bagi pengembang untuk menemukan 'berlian di awal'. Kami telah melihat kembali waktu kami terjebak di Grunt untuk menemukan resep plugin Grunt yang sempurna yang harus Anda gunakan.
01. Uglify
Setiap pengembang front-end yang sepadan dengan pengetahuan mereka tahu tentang keuntungan mengecilkan file JavaScript, dan itulah yang sebenarnya dilakukan plugin ini. Begitulah popularitasnya, itu sebenarnya termasuk dalam Panduan Memulai Grunt. Terlepas dari namanya, plugin ini juga dapat digunakan untuk mempercantik kode JavaScript Anda - meskipun itu tidak terlalu berguna untuk penggunaan produksi.
02. Sass
Mungkin ada beberapa perdebatan tentang praprosesor CSS mana yang benar-benar mendominasi, tetapi di sini, di Stickyeyes, kami telah memilih Sass daripada saingan utamanya, Less. Plug-in ini memungkinkan kita untuk menulis file Sass kita dan membuatnya dikompilasi ke CSS secara otomatis. Manfaat menggunakan praprosesor CSS memerlukan artikel tersendiri, tetapi dapat dikatakan bahwa jika Anda belum menggunakannya, Anda sangat terlambat ke pesta!
03. CSSMin
Plugin ini setara dengan CSS dari Uglify. Itu hanya mendapatkan file CSS tertentu dan mengecilkannya. Tentu saja jika Anda akan menggunakan ini bersama dengan plugin Sass maka Anda perlu memastikan bahwa tugas ini dijalankan setelah tugas Sass.
Ada banyak alternatif untuk CSSMin yang juga dapat mengurangi ukuran file CSS Anda menggunakan teknik yang sedikit berbeda; CSS nano, CSS wring, CSS shrink, dll. Baca tolok ukur praktis ini jika Anda menyukai hal semacam itu.
04. Concat
Seperti namanya, plugin ini hanya mengambil banyak file dan menggabungkannya menjadi satu. Seperti halnya kode minifikasi, file gabungan juga merupakan praktik terbaik kuno untuk mengurangi waktu muat halaman.
Penggabungan file harus selalu digunakan dalam produksi untuk JavaScript dan CSS. Ini biasanya tugas terakhir yang harus dijalankan - setelah tugas pra-pemrosesan CSS dan tugas minifikasi. Sangat mudah untuk memberi tahu plugin ini untuk menggabungkan semua file dalam direktori tertentu, tetapi berhati-hatilah dengan urutan file akan digabungkan - Anda mungkin perlu memberikan urutan atau nama file tertentu agar selalu digabungkan dalam urutan yang Anda inginkan .
05. ImageMin
Dengan nada yang sama seperti CSSMin dan Uglify, ImageMin menangani masalah lama lainnya untuk pemuatan halaman - ukuran file gambar. 'Minifikasi' gambar biasanya merupakan port-of-call pertama untuk pengoptimalan, jadi plugin ini sangat penting untuk mengurangi ukuran file halaman total sebanyak mungkin.
Jika Anda bekerja dengan JPG, PNG, GIF atau SVG (format gambar vektor yang semakin populer), plugin ini akan memberikan pengurangan lossless pada ukuran file gambar Anda, tanpa Anda harus bersusah payah. Jika Anda memiliki banyak gambar dalam proyek Anda, sebaiknya jalankan tugas ini hanya saat Anda mendorong ke produksi, daripada menjalankan tugas ini pada acara menonton (lihat poin berikutnya).
06. Perhatikan
Plugin ini sebenarnya tidak memengaruhi front-end situs web Anda, tetapi sangat berguna dalam membuat proses Grunt yang efisien. Tonton cukup awasi direktori apa pun yang Anda tentukan, dan begitu sesuatu berubah, secara otomatis akan memicu tugas Grunt tertentu.
Jadi, Anda dapat menyiapkan satu kondisi jam tangan di direktori 'js' untuk menjalankan tugas JavaScript Anda, dan kondisi lainnya di direktori 'css' untuk menjalankan tugas CSS Anda. Ini berarti Anda tidak perlu menjalankan proses utama Grunt secara manual! Cukup inisialisasi tugas arloji kasar sebelum Anda mulai membuat perubahan dan Anda bisa melupakannya bahkan di sana.
Kata-kata: Jamie Shields
Jamie Shields adalah pengembang back end di agensi pemasaran digital Stickyeyes.
Seperti ini? Baca ini!
- Grunt vs Gulp: Alat pembuat JavaScript mana yang harus Anda pilih?
- 8 cara untuk meningkatkan penyiapan Grunt Anda
- Tema WordPress gratis terbaik
