Css 以grunt:watch中的特定文件集为目标

我们正在使用

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']
  }
}

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

---

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

当

监视

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

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目标，您可以使用它们来指定要编译的文件

---

来源：我最初在中看到了使用的监视技术。

来自

grunt:watch

：watch事件并不是为了替换用于配置和运行任务的标准gruntapi。如果您试图在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
    }
}