WebPack和NPM腳本主導(dǎo)了現(xiàn)代JavaScript開(kāi)發(fā)，處理任務(wù)和捆綁。但是，許多項(xiàng)目仍然依靠咕unt。雖然不是街上最新的孩子，但Grunt仍然是可靠的主力。本文探討了簡(jiǎn)化和改善您現(xiàn)有的咕unt項(xiàng)目的策略。

用jit-grunt增壓任務(wù)加載

使用grunt.loadNpmTasks手動(dòng)加載每個(gè)grunt任務(wù)是乏味的。 load-grunt-tasks提供自動(dòng)化，但jit-grunt提供更快的性能，尤其對(duì)大型項(xiàng)目有益。

性能比較：

沒(méi)有jit-grunt ：

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

與jit-grunt ：

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

大幅提高速度！ jit-grunt僅根據(jù)需要加載任務(wù)來(lái)實(shí)現(xiàn)此優(yōu)化。

使用jit-grunt ：

1. 安裝： npm install jit-grunt --save
2. 更換任務(wù)加載語(yǔ)句：

模塊。 Exports= function（grunt）{
  //而不是單個(gè)grunt.loadnpmtasks調(diào)用...
  需要（'jit-grunt'）（咕unt）;

  grunt.initConfig（{}）;
}

簡(jiǎn)化配置加載

下一步是將您的gruntfile分解為較小，更可管理的配置文件。代替單片gruntfile.js ，將您的配置組織到單獨(dú)的文件中。我們將使用load-grunt-configs進(jìn)行有效的加載。

使用load-grunt-configs ：

模塊。 Exports= function（grunt）{
  需要（'jit-grunt'）（咕unt）;

  const configs = require（'load-grunt-configs'）（grunt，{
    config：{src：'任務(wù)/*。 js'}
  }）;

  grunt.initconfig（configs）;
  grunt.registerTask（'default'，['cssmin']）;
}

另外，Grunt提供本機(jī)任務(wù)加載： grunt.loadTasks('tasks') 。但是，這立即執(zhí)行文件，不理想配置。為了利用這一點(diǎn)，您必須使用grunt.config在外部文件本身中配置任務(wù)。

示例使用grunt.loadTasks ：

 //任務(wù)/mytask.js
模塊。 Exports= function（grunt）{
  grunt.config（'mytask'，{
    選項(xiàng)：'value'
  }）;
};

// gruntfile.js
模塊。 Exports= function（grunt）{
  需要（'jit-grunt'）（咕unt）;
  grunt.initConfig（{}）;
  grunt.loadtasks（'tasks'）;
  grunt.registerTask（'default'，['mytask']）;
};

高級(jí)配置組織：通過(guò)功能進(jìn)行分組

通過(guò)文件名組織任務(wù)並不總是直觀的。一種更有效的方法是通過(guò)功能或功能進(jìn)行分組配置。

代替了許多單獨(dú)的任務(wù)文件，而是創(chuàng)建代表功能的文件（例如， styles.js ， scripts.js ， images.js ）。使用grunt.config.merge結(jié)合相關(guān)任務(wù)的配置，避免覆蓋。

示例：樣式配置：

 //任務(wù)/styles.js
模塊。 Exports= function（grunt）{
  grunt.config（'sass'，{ / * ... * /}）;
  grunt.config（'Postcss'，{ / * ... * /}）;
  grunt.config.merge（{
    手錶： {
      樣式：{
        文件：['source/styles/*。 scss']，
        任務(wù)：['sass'，'postcss']
      }
    }
  }）;
};

這種方法可增強(qiáng)可讀性和可維護(hù)性，從而更清晰地概述了您的項(xiàng)目結(jié)構(gòu)。

結(jié)論

雖然不是最新的技術(shù)，但對(duì)於適當(dāng)?shù)慕M織而言，Grunt仍然是可行的選擇。通過(guò)利用jit-grunt ， load-grunt-configs （或帶有仔細(xì)任務(wù)定義的grunt.loadTasks ）以及基於功能的配置結(jié)構(gòu)，您可以顯著提高grunt項(xiàng)目的效率和可維護(hù)性。請(qǐng)記住，請(qǐng)查閱Grunt文檔以獲取更多細(xì)節(jié)和可能性。

以上是讓瑪麗·昆多組織的治療付出艱鉅的任務(wù)的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！