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: {
  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中使用的手表技术。

以grunt为目标定位特定文件集：观看

1 个答案: