Node.js编程式运行Grunt任务：实现文件变更定向合并需求

我之前也碰到过一模一样的需求，一开始踩了好几个坑，后来通过两种方式解决了，给你详细拆解下：

方案一：拆分Concat为独立子任务（推荐，最直观） #

如果你的Concat配置是把所有合并目标放在同一个JS target下的files里，比如：

grunt.initConfig({
  concat: {
    JS: {
      files: {
        'dist/index.js': ['src/test-1.js', 'src/common.js'],
        'dist/detail.js': ['src/test-2.js', 'src/common.js']
      }
    }
  }
});

可以把它拆成多个独立子任务，每个合并目标对应一个子任务：

grunt.initConfig({
  concat: {
    // 对应index.js的合并任务
    indexJs: {
      src: ['src/test-1.js', 'src/common.js'],
      dest: 'dist/index.js'
    },
    // 对应detail.js的合并任务
    detailJs: {
      src: ['src/test-2.js', 'src/common.js'],
      dest: 'dist/detail.js'
    }
  },
  watch: {
    // 监听test-1.js，仅触发indexJs合并
    watchIndex: {
      files: ['src/test-1.js'],
      tasks: ['concat:indexJs']
    },
    // 监听test-2.js，仅触发detailJs合并
    watchDetail: {
      files: ['src/test-2.js'],
      tasks: ['concat:detailJs']
    },
    // 公共文件变更时，全量合并所有目标
    watchCommon: {
      files: ['src/common.js'],
      tasks: ['concat:indexJs', 'concat:detailJs']
    }
  }
});

这种方式不需要额外事件监听，直接通过watch的tasks指定对应子任务就行，逻辑清晰，不容易出错。

方案二：通过Watch事件动态修改Concat配置（适合不想改原有Concat结构） #

如果不想调整现有Concat配置结构，可以通过Grunt的watch事件回调动态修改合并目标，关键是要关闭spawn选项（默认watch用子进程执行任务，子进程里的配置修改不会生效）。

1. 配置Watch任务（留空tasks，关闭spawn） #

grunt.initConfig({
  concat: {
    JS: {
      files: {
        'dist/index.js': ['src/test-1.js', 'src/common.js'],
        'dist/detail.js': ['src/test-2.js', 'src/common.js']
      }
    }
  },
  watch: {
    jsIndex: {
      files: ['src/test-1.js'],
      tasks: [], // 留空，通过事件触发任务
      options: {
        spawn: false // 必须关闭，否则配置修改不生效
      }
    },
    jsDetail: {
      files: ['src/test-2.js'],
      tasks: [],
      options: {
        spawn: false
      }
    },
    jsCommon: {
      files: ['src/common.js'],
      tasks: ['concat:JS'] // 公共文件变更全量合并
    }
  }
});

2. 注册Watch事件回调 #

在Gruntfile.js的合适位置（比如grunt.initConfig()之后、grunt.registerTask()之前）添加事件监听：

// 监听watch事件，动态调整concat任务
grunt.event.on('watch', function(action, filepath, target) {
  // 根据watch的target判断要执行的合并目标
  if (target === 'jsIndex') {
    // 临时修改concat.JS的files配置，只保留index.js的合并规则
    grunt.config.set('concat.JS.files', {
      'dist/index.js': ['src/test-1.js', 'src/common.js']
    });
    // 触发concat任务
    grunt.task.run('concat:JS');
  } else if (target === 'jsDetail') {
    grunt.config.set('concat.JS.files', {
      'dist/detail.js': ['src/test-2.js', 'src/common.js']
    });
    grunt.task.run('concat:JS');
  }
});

你之前事件未生效的常见原因排查 #

• 没关闭spawn: false：这是最容易踩的坑，默认watch用子进程执行任务，回调里修改的配置不会传到子进程，任务还是按原配置执行。
• 监听路径不匹配：确认watch的files路径和实际文件的相对路径一致，比如如果test-1.js在src/js/test-1.js，路径要写准确。
• 事件注册位置不对：确保事件监听代码在grunt.initConfig()之后，且在grunt.loadNpmTasks('grunt-contrib-watch')之后执行。

内容的提问来源于stack exchange，提问作者pumpkinzzz