2

我们正在使用基于 Pythongrunt-contrib-watch的grunt-shellSCSS 编译库（项目的要求）来编译 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: {
  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/{,**/}*']
  }
}

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

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

4

1 回答 1

0

当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 目标，您可以使用任务的参数来指定要编译的文件。

资料来源：我最初看到generator-cg-angular 生成的 Gruntfile中使用的 watch 技术。

于 2015-06-25T02:25:11.127 回答