Kandungan
Pelari tugas JavaScript seperti Grunt telah menjadi sangat popular dengan pemaju front-end. Ini kerana mereka membantu melakukan satu perkara yang kita semua mahu lakukan dalam pekerjaan kita - menjimatkan masa!
Tetapi dengan lebih daripada 5,000 (dan masih banyak) plugin Grunt kini tersedia, sukar bagi pemaju untuk mencari 'intan tersebut'. Kami telah melihat kembali masa kita terjebak dengan Grunt untuk mencari resipi Plugin Grunt yang sesuai yang harus anda gunakan.
01. Uglify
Setiap pemaju depan bernilai garam tahu tentang kelebihan meminimumkan fail JavaScript, dan itulah yang dilakukan oleh pemalam ini. Itulah popularitinya, sebenarnya termasuk dalam Panduan Memulakan Grunt. Walaupun namanya, plugin ini juga dapat digunakan untuk memperindah kod JavaScript anda - walaupun itu tidak begitu berguna untuk penggunaan produksi.
02. Sass
Mungkin terdapat beberapa perdebatan mengenai pemproses pra CSS mana yang benar-benar memerintah, tetapi di sini di Stickyeyes, kami telah menetap di Sass daripada saingan utamanya, Less. Pemalam ini membolehkan kami menulis fail Sass kami dan menyusunnya ke CSS secara automatik. Kelebihan menggunakan pra-pemproses CSS memerlukan artikel yang tersendiri, tetapi selamat untuk mengatakan bahawa jika anda belum menggunakannya, anda sudah terlambat ke pesta itu!
03. CSSMin
Plugin ini setaraf dengan CSS Uglify. Ia hanya mendapat fail CSS yang ditentukan dan meminimumkannya. Sudah tentu jika anda akan menggunakan ini bersama dengan Sass plugin maka anda perlu memastikan bahawa tugas ini dijalankan setelah tugas Sass.
Terdapat banyak alternatif untuk CSSMin yang juga dapat mengurangkan ukuran fail CSS anda menggunakan teknik yang sedikit berbeza; CSS nano, CSS wring, CSS shrink, etc. Baca tanda aras berguna ini jika anda menyukai jenis barang tersebut.
04. Concat
Seperti namanya, plugin ini hanya mengambil banyak fail dan menggabungkannya menjadi satu. Seperti pengurangan kod, menggabungkan fail juga merupakan amalan terbaik lama untuk mengurangkan masa muat halaman.
Gabungan fail harus selalu digunakan dalam pengeluaran untuk JavaScript dan CSS. Ini biasanya merupakan tugas terakhir yang harus dijalankan - setelah tugas pra-pemprosesan CSS dan tugas pengurangan. Cukup mudah untuk memberitahu plugin ini untuk menggabungkan semua fail dalam direktori tertentu, tetapi berhati-hatilah dengan urutan bahawa fail akan digabungkan - anda mungkin perlu memberikan pesanan tertentu atau beri nama fail supaya selalu digabungkan mengikut urutan yang anda mahukan .
05. ImageMin
Dalam urutan yang sama seperti CSSMin dan Uglify, ImageMin mengatasi masalah lama lain untuk memuat halaman - saiz fail gambar. Imej ‘minification’ biasanya merupakan panggilan pertama untuk pengoptimuman, jadi plugin ini sangat mustahak untuk mengurangkan jumlah saiz fail halaman sebanyak mungkin.
Sekiranya anda bekerja dengan JPG, PNG, GIF atau SVG (format gambar vektor yang semakin popular), hasil pemalam ini akan memberikan pengurangan kehilangan saiz fail gambar anda, tanpa anda perlu mengangkat jari. Sekiranya anda mempunyai banyak gambar dalam projek anda, adalah idea yang baik untuk menjalankan tugas ini hanya semasa anda mendorong pengeluaran, dan bukannya menjalankan tugas ini pada acara menonton (lihat titik seterusnya).
06. Tonton
Plugin ini sebenarnya tidak mempengaruhi laman web anda, tetapi sangat berguna dalam membuat proses Grunt yang cekap. Tonton hanya mengawasi setiap direktori yang anda tentukan, dan setelah sesuatu berubah, secara automatik akan memicu tugas Grunt tertentu.
Oleh itu, anda boleh menetapkan satu syarat menonton di direktori 'js' anda untuk menjalankan tugas JavaScript anda, dan yang lain di direktori 'css' anda untuk menjalankan tugas CSS anda. Ini bermakna anda tidak perlu menjalankan proses Grunt utama anda secara manual! Cukup mulakan tugas memerhatikan sebelum anda mula membuat perubahan dan anda boleh melupakannya walaupun ada.
Perkataan: Jamie Shields
Jamie Shields adalah pemaju belakang di agensi pemasaran digital Stickyeyes.
Seperti ini? Baca ini!
- Grunt vs Gulp: Alat pembuatan JavaScript mana yang harus anda pilih?
- 8 cara untuk meningkatkan penyediaan Grunt anda
- Tema WordPress percuma terbaik
