我是如何將冗長的Grunt任務(wù)拆分的

honhon 發(fā)布于2019-08-21 12:13 / 1326人閱讀

摘要：具體實現(xiàn)方法就不多說了，重點是每個模塊中的配置對象能夠深度合并，合并后傳給。有興趣的同學(xué)可以看看我在的這個小項目，可以不關(guān)心具體實現(xiàn)，到自己項目中直接使用，兼容了和。

寫Grunt對于很多JS程序員來說，不像寫JS，更像是寫一堆配置代碼，相信用過Grunt的人都深有體會，就拿一個簡答的uglify任務(wù)舉例：

grunt.initConfig({
  pkg: grunt.file.readJSON("package.json"),
  uglify: {
    task1: {
      src: "src/task1.js",
      dest: "build/task1.min.js"
    },
    task2: {
      src: "src/task2.js",
      dest: "build/task2.min.js"
    }
  }
});

隨著項目復(fù)雜度提升，任務(wù)會越來越多，會有task3，task4...等等，uglify的配置就顯得非常冗長，再加上less，coffee等任務(wù)，也會有很多個task，最后Gruntfile.js越來越長，越來越難以維護。

這時候就想到，如果能夠?qū)⒚總€task拆分出來成為多帶帶的模塊，多帶帶的js文件，執(zhí)行grunt的時候再將這些模塊合并輸出傳給grunt.initConfig，每個任務(wù)的調(diào)理就會清晰很多，Gruntfile.js也不會很長，用一個tasks文件夾來存放每個task模塊，目錄結(jié)構(gòu)如下：

theProject/
|
|------Gruntfile.js
|------tasks
|        |-task1.js
|        |-task2.js
|        |-task3.js
|

在task1.js中，配置task1對應(yīng)的grunt任務(wù)：

module.exports = function(grunt) {

  // 加載grunt依賴
  grunt.loadNpmTasks("grunt-contrib-uglify");
  grunt.loadNpmTasks("grunt-contrib-less");

  // 注冊task1任務(wù)
  grunt.registerTask("task1", [
    "uglify:task1",
    "less:task1"
  ]);

  gruntConfig = {
    uglify: {
      task1: {
        src: "src/task1.js",
        dest: "build/task1.min.js"
      }
    },
    less: {
      task1: {
        src: "src/task1.less",
        dest: "build/task1.css"
      }
    }
  };

  return gruntConfig;
};

這樣每一個grunt任務(wù)就從統(tǒng)一的Gruntfile.js拆分開來，對應(yīng)一個task模塊，接下來就是重寫Gruntfile.js，讓它能夠合并所有任務(wù)模塊，再配置到grunt.initConfig中去。

具體實現(xiàn)方法就不多說了，重點是每個task模塊中的gruntConfig配置對象能夠深度合并，合并后傳給grunt.initConfig。

有興趣的同學(xué)可以看看我在Github的這個小項目，可以不關(guān)心具體實現(xiàn)，clone到自己項目中直接使用，兼容了coffee和js。

當(dāng)我把它用到工作項目中，寫grunt舒服了太多，再也不比辛辛苦苦拖上拖下找代碼了。

另外，啰嗦一句，Grunt提供了很多有用的工具方法，卻經(jīng)常被我們忽略，可以在官網(wǎng)看到。