GruntJS 如何监视所有文件但只处理更改的文件？答案

【问题标题】：How can GruntJS watch all files but process only the ones that change?GruntJS 如何监视所有文件但只处理更改的文件？
【发布时间】：2017-04-10 10:46:49
【问题描述】：

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

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 编写单独的规则。必须为每个文件明确指定类似的规则似乎很愚蠢。

【问题讨论】：

watch: { /* ... */ } 对象下的所有值都是配置对象，它们都将在grunt watch 上运行，它们指定了一组给定文件更改时要运行的任务。跨度>
是的，威廉。但是我怎么知道：当文件 c.scss 发生变化时，只在 c.scss 上运行 sass，然后将生成的 .css 文件放入 dest/css/c.css。然后minfiy dest/css/c.css 只进dest/css/c.min.css?
在files属性中指定c.scss
欢迎来到 2016 年，重新发明轮子是常态，新轮子比四十年前的原始轮子更糟糕。为什么不使用make 本身？与 grunt 和 gulp 等过度设计的千禧一代替代品相比，许多人都这样做了，并且对它的工作方式非常满意。你可以很容易地找到在 JS 项目中使用 make 的指南。然后你可以继续你的下一个项目，在你的项目中摆脱 SASS。
我暗自怀疑 grunt 及其同类的创始人甚至不知道 make ，更不用说了解它了。而且无论如何，我们不能在 JS 项目中使用它，因为你知道一切必须是 JS。

标签： css gruntjs minify grunt-contrib-watch grunt-sass-lint

【解决方案1】：

你需要添加一个模块grunt-concurrent来运行多个watch实例：

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

【讨论】：