Skrip Webpack dan NPM menguasai pembangunan JavaScript moden, tugas pengendalian dan penggabungan. Walau bagaimanapun, banyak projek masih bergantung pada Grunt. Walaupun bukan kanak -kanak terbaru di blok, Grunt kekal sebagai kerja keras yang boleh dipercayai. Artikel ini meneroka strategi untuk menyelaraskan dan memperbaiki projek -projek anda yang sedia ada.

Memuatkan tugas supercharging dengan jit-grunt

Secara manual memuatkan setiap tugas mengerang menggunakan grunt.loadNpmTasks adalah membosankan. load-grunt-tasks menawarkan automasi, tetapi jit-grunt memberikan prestasi yang lebih cepat, terutama memberi manfaat kepada projek yang lebih besar.

Perbandingan Prestasi:

Tanpa jit-grunt :

 <code>loading tasks 5.7s ▇▇▇▇▇▇▇▇ 84% assemble:compile 1.1s ▇▇ 16% Total 6.8s</code>

Dengan jit-grunt :

 <code>loading tasks 111ms ▇ 8% loading assemble 221ms ▇▇ 16% assemble:compile 1.1s ▇▇▇▇▇▇▇▇ 77% Total 1.4s</code>

Peningkatan kelajuan yang ketara! jit-grunt mencapai pengoptimuman ini dengan hanya memuatkan tugas seperti yang diperlukan.

Menggunakan jit-grunt :

1. Pasang: npm install jit-grunt --save
2. Ganti penyataan pemuatan tugas anda:

 modul.exports = fungsi (grunt) {
  // bukannya grunt.loadnpmtasks individu ...
  memerlukan ('jit-grunt') (grunt);

  grunt.initconfig ({});
}

Memuatkan pemuatan konfigurasi

Langkah seterusnya adalah untuk meremehkan gruntfile anda ke dalam fail konfigurasi yang lebih kecil dan lebih mudah diuruskan. Daripada gruntfile.js monolitik, mengatur konfigurasi anda ke dalam fail berasingan. Kami akan menggunakan load-grunt-configs untuk memuatkan yang cekap.

Menggunakan load-grunt-configs :

 modul.exports = fungsi (grunt) {
  memerlukan ('jit-grunt') (grunt);

  const configs = memerlukan ('beban-grunt-configs') (grunt, {
    config: {src: 'tugas/*. js'}
  });

  grunt.InitConfig (configs);
  grunt.registerTask ('lalai', ['cssmin']);
}

Sebagai alternatif, Grunt menawarkan pemuatan tugas asli: grunt.loadTasks('tasks') . Walau bagaimanapun, ini melaksanakan fail dengan segera, tidak sesuai untuk konfigurasi. Untuk memanfaatkan ini, anda mesti mengkonfigurasi tugas dalam fail luaran sendiri menggunakan grunt.config .

Contoh Menggunakan grunt.loadTasks :

 // tugas/mytask.js
modul.exports = fungsi (grunt) {
  grunt.config ('myTask', {
    Pilihan: 'Nilai'
  });
};

// gruntfile.js
modul.exports = fungsi (grunt) {
  memerlukan ('jit-grunt') (grunt);
  grunt.initconfig ({});
  grunt.loadTasks ('tugas');
  grunt.registerTask ('lalai', ['myTask']);
};

Organisasi Konfigurasi Lanjutan: Mengumpulkan mengikut ciri

Mengatur tugas dengan nama fail tidak selalu intuitif. Pendekatan yang lebih berkesan adalah untuk konfigurasi kumpulan mengikut ciri atau fungsi.

Daripada banyak fail tugas individu, buat fail yang mewakili ciri (contohnya, styles.js , scripts.js , images.js ). Gunakan grunt.config.merge untuk menggabungkan konfigurasi untuk tugas yang berkaitan, mengelakkan penindasan.

Contoh: Konfigurasi Gaya:

 // tugas/gaya.js
modul.exports = fungsi (grunt) {
  grunt.config ('sass', { / * ... * /});
  grunt.config ('postcss', { / * ... * /});
  grunt.config.merge ({
    Tonton: {
      Gaya: {
        Fail: ['Sumber/Gaya/*. SCSS'],
        Tugas: ['sass', 'postcss']
      }
    }
  });
};

Pendekatan ini meningkatkan kebolehbacaan dan kebolehkerjaan, memberikan gambaran yang lebih jelas mengenai struktur projek anda.

Kesimpulan

Walaupun bukan teknologi terbaru, Grunt tetap menjadi pilihan yang sesuai dengan organisasi yang sesuai. Dengan memanfaatkan jit-grunt , load-grunt-configs (atau grunt.loadTasks dengan definisi tugas yang teliti), dan struktur konfigurasi berasaskan ciri, anda dapat meningkatkan kecekapan dan mengekalkan projek-projek anda. Ingatlah untuk berunding dengan dokumentasi Grunt untuk maklumat lanjut dan kemungkinan.

Atas ialah kandungan terperinci Let ' s Memberi Tugas -tugas Grunt Rawatan Organisasi Marie Kondo. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!