Question

我有一个网络应用程序，其目录结构如下所示：

src/
 - styles/
   - a.css
   - b.css
   - c.scss
   - d.scss
 - media/
   - d.jpg
   - e.png
   - f.mpf
dest/
 - css/
 - media/
package.json
Gruntfile.js

我想使用Gruntfile来监视文件的变化。当他们改变，处理或复制它们时。我不希望文件被不必要地复制或处理。我正在试图弄清楚如何使用Gruntfile执行此操作并发现它非常棘手。

我来自C ++和makefile的世界。它们很棒，因为对于每个派生文件，您将指定派生它的命令，以及该派生直接依赖的文件。如果任何依赖项文件比目标更新，则将运行您的命令。如果没有任何依赖文件，那么它将基于这个相同的递归逻辑生成。

我怎样才能在Grunt中实现同样的目标？通过指定监视，您可以查看多个文件以进行更改。但是，您运行的命令通常不是特定于更改的文件。

我的Gruntfile是here。请告诉我如何修改它以实现以下3条规则：

当任何文件src / styles / .scss更改时，使用Sass编译它并将结果放在dest / css / .css中。然后将其缩小为dest / css / * .min.css
当任何文件src / styles / .css发生更改时，请将其复制到dest / css / .css。然后将其缩小为dest / css / * .min.css
当任何文件src / media / *更改时，将其复制到dest / media / *

我希望这些规则是通用的。 IE：我不想为b.scss和d.scss编写单独的规则。为每个文件明确指定类似的规则似乎很蠢。

Answer 1

您需要添加一个模块grunt-concurrent来运行多个监视实例：

concurrent: {
 dev: {
   tasks: [
    'watch:sass:12340',
    'watch:copy_css:12350',
   ],
   options: {
    logConcurrentOutput: true
   }
  }
}
grunt.loadNpmTasks('grunt-concurrent');

我认为我将以这种方式编辑手表部分：

watch: {
  sass: {
      files: ['src/css/*.scss'],
      tasks: ['sass:all','cssmin'],
      options: {
          spawn: false
      }
  },
  copy_css: {
      files: 'src/css/*.css',
      tasks: ['copy:all','cssmin'],
      options: {
          spawn: false
      }
  },
  copy_media: {
    files: 'src/media/**',
    tasks: ['copy']
  }
}

而不是grunt concurrent:dev

GruntJS如何监视所有文件，但只处理那些更改的文件？

1 个答案: