针对 grunt:watch 中的特定文件集

Question

我们使用grunt-contrib-watch 和grunt-shell 和基于Python 的SCSS 编译库（项目的要求）来编译SASS。更复杂的是，我们需要编译三个单独的 CSS 文件。目录结构或多或少是这样的：

global.scss
modules.scss
pages.scss
lib/
  bourbon/
  neat/
  bitters
global/
  global-styles.scss
modules/
  module-i.scss
  module-ii.scss
  module-iii.scss
pages/
  page-i.scss
  page-ii.scss
  page-iii.scss

我需要编译三个输出，global.css、modules.css 和 pages.css。全局、模块和页面中的源文件都引用了 lib 中的 mixin 库。

我该如何设置 grunt:watch 任务，以便对模块目录中的文件的更改只会导致特定于模块文件的编译？

我设置了这样的监视任务：

watch: {
  pyscssglobal: {
    files: ['<%= src.scss %>/global.scss', '<%= src.scss %>/global/**/*.scss'],
    tasks: ['shell:pyscssglobal']
  },

  pyscssmodules: {
    files: ['<%= src.scss %>/modules.scss', '<%= src.scss %>/modules/**/*.scss' ],
    tasks: ['shell:pyscssmodules']
  },

  pyscsspages: {
    files: ['<%= src.scss %>/pages.scss', '<%= src.scss %>/pages/**/*.scss' ],
    tasks: ['shell:pyscsspages']
  }
}

... 和这样的 shell 任务（同样，这是项目的要求）：

shell: {
  pyscssglobal: {
    command: '(python -mscss < scss/global.scss) > css/global.css'
  },
  pyscssmodules: {
    command: '(python -mscss < scss/modules.scss) > css/modules.css'
  },
  pyscsspages: {
    command: '(python -mscss < scss/pages.scss) > css/pages.css'
  }
}

但这意味着我必须运行三个单独的监视任务。所以我换了手表，它看起来像这样：

all: {
  tasks: ['shell:pyscssglobal', 'shell:pyscssmodules', 'shell:pyscsspages'],
    files: ['scss/{,**/}*']
  }
}

...但是每次我对一个文件进行更改（预期）时，这都会执行所有三个任务。

如何根据已更改的文件确定要运行的特定任务？我想不通。提前感谢您提供的任何帮助或指导。

Answer 1

当watch 事件触发时，您可以运行一个函数来检查更改的文件，然后确定要运行哪些任务：

grunt.event.on('watch', function (action, filepath) {
    var tasksToRun = [];

    if (filepath === 'fileA.scss') {
        tasksToRun.push('scss:fileA');
    }

    grunt.config('watch.main.tasks', tasksToRun);

});

您的配置如下所示：

watch: {
    main: {
        files: ['abc', 'def'],
                tasks: [] //all the tasks are run dynamically during the watch event handler
    }
}

而且，为了避免产生一堆不同的 Sass 目标，您可以使用 arguments to your tasks 指定要编译的文件。

来源：我最初看到generator-cg-angular's generated Gruntfile中使用的watch技术。