如何运行两个独立的grunt-sass任务？实现分目录监听编译

你的思路完全没问题，只需要把watch配置里的sass_B部分补全，就能实现「仅对应目录文件变化时才执行对应编译任务」的需求。这里是完整可运行的Grunt配置示例：

module.exports = function(grunt) {
  grunt.initConfig({
    sass: {
      A: {
        dist: {
          files: {
            'A/main.css': 'A/main.scss'
          }
        }
      },
      B: {
        dist: {
          files: {
            'B/main.css': 'B/main.scss'
          }
        }
      }
    },
    watch: {
      sass_A: {
        files: 'A/**/*.scss', // 监听A目录（含子目录）下所有SCSS文件
        tasks: ['sass:A'],    // 仅触发A目录的编译任务
        options: {
          spawn: false, // 可选：提升监听性能，避免重复启动进程
        }
      },
      sass_B: {
        files: 'B/**/*.scss', // 监听B目录（含子目录）下所有SCSS文件
        tasks: ['sass:B'],    // 仅触发B目录的编译任务
        options: {
          spawn: false,
        }
      }
    }
  });

  // 加载所需Grunt插件
  grunt.loadNpmTasks('grunt-contrib-sass');
  grunt.loadNpmTasks('grunt-contrib-watch');

  // 注册默认任务：启动监听
  grunt.registerTask('default', ['watch']);
};

关键细节说明： #

• 精准文件匹配：A/**/*.scss和B/**/*.scss的写法，能确保只监听对应目录（包括子目录）下的SCSS文件，不会出现跨目录误触发的情况。
• 独立任务绑定：每个watch目标都绑定了唯一的sass子任务，完全符合你「不必要时不执行开销大的任务」的要求。
• 可选性能优化：spawn: false选项可以让watch复用现有进程，减少任务启动的额外开销，对于包含大量文件的项目尤其实用。

使用时只需要在终端运行grunt命令，watch就会同时监听两个目录，各自独立触发编译任务，不会互相干扰。

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