你如何在 Grunt.js 中观看多个文件，但只在更改的文件上运行任务？

IT技术 javascript node.js gruntjs
2021-03-22 16:48:58

在学习如何使用grunt 时，我正在尝试制作一个简单的咖啡脚本观察器/编译器。问题是，如果我告诉watch任务观察多个文件，并且其中一个发生变化，它会将所有文件传递给coffee命令。这意味着当您更改 1 个文件时，它将重新编译与该模式匹配的所有文件src。相反，我只想重新编译与src模式匹配的更改的单个文件。

这是grunt.js：

module.exports = function(grunt) {
  grunt.initConfig({
    coffee: {
      app: {
        src: ['test/cases/controller/*.coffee'],
        dest: 'tmp',
        options: {
          bare: true,
          preserve_dirs: true
        }
      }
    },
    watch: {
      files: ['<config:coffee.app.src>'],
      tasks: ['coffee:app']
    }
  });

  grunt.loadNpmTasks('grunt-coffee');
  grunt.registerTask('default', 'coffee');
};

这是使用grunt-coffee，基本上是这样的：https : //gist.github.com/2373159。

当我运行grunt watch并将文件保存在 中时test/cases/controller/*.coffee，它会编译所有匹配的文件（将它们放入 中tmp/*）。

你如何只使用 grunt编译更改过的文件？

6个回答

即将发布（目前正在开发）的 v0.4.0a grunt 有grunt.file.watchFiles对象，它是专门为此目的而设计的。grunt-coffee 插件可能已经添加了对这个功能的支持，我不确定。

无论哪种方式，如果您有兴趣在您的项目中尝试开发中的 grunt 版本，请查看我何时能够使用开发中的功能“X”？常见问题入口。

任何不熟悉此功能的人都应该在这里查看有关“watch”的更多信息-> github.com/gruntjs/grunt-contrib-watch
2021-05-02 16:48:58
这通常是 node.js 的问题。Gaze 已经解决了这个问题，并且即将修复。看看你能不能帮忙。github.com/shama/gaze/issues/14
2021-05-05 16:48:58
是的，所以这个已经不存在了，这个还在讨论中。观看github.com/gruntjs/grunt-contrib-watch/issues/14
2021-05-13 16:48:58

我在编译我的 less 文件时得到了这个。你应该能够稍微弄乱这个配置，让它与 coffeescript 插件一起工作。感兴趣的部分是grunt.event.on('watch', ...)。在此事件处理程序中，我将更新filesless 命令中的属性以仅包含更改的文件。

path = require('path');

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({

    pkg: grunt.file.readJSON('package.json'),

    less: {
      development: {
        options: {
          paths: ["./library/less"],
        },
        files: [
          { src: "./library/less/bootstrap.less", dest: "./library/css/bootstrap.css"},
          { src: "./library/less/app.less", dest: "./library/css/app.css"}
        ]
      }
    },

    watch: {
      styles: {
        files: "./library/less/*",
        tasks: ["less"],
        options: {
          nospawn: true,
        },
      },
    },
  });

  // Event handling
  grunt.event.on('watch', function(action, filepath){
    // Update the config to only build the changed less file.
    grunt.config(['less', 'development', 'files'], [
      {src: filepath, dest: './library/css/' + path.basename(filepath, '.less') + '.css'}
    ]);
  });

  // Load the plugins
  grunt.loadNpmTasks('grunt-contrib-less');
  grunt.loadNpmTasks('grunt-contrib-watch');

  // Tasks
  grunt.registerTask('default', ['watch']);
};
此方法不适用于动态构建文件。任何解决方法？
2021-04-26 16:48:58
@blachniet：这太棒了！但我仍然遇到一个问题——也许你知道答案。是否可以覆盖选项的单个属性？因此，例如在监视事件处理程序中，我使用“grunt.config(['sftp', 'widgets', 'options.srcBasePath'], file_path);”。我希望使用我已经在 sftp 配置中设置的选项，但向其中添加了一个键值对。那可能吗？我上面的代码没有任何反应。使用“grunt.config(['sftp', 'widgets', 'options'], {"srcBasePath:":file_path});" 所有其他选项都被覆盖...
2021-04-27 16:48:58
@blachniet：没关系^^ - grunt.config(['sftp', 'widgets', 'options', 'srcBasePath'], file_path); 用于设置单个键值对。;)
2021-05-19 16:48:58

这些答案都不适合我。如果有人感兴趣，这是我的解决方案（我知道我回答这个问题有点晚了）。

https://gist.github.com/ryansmith94/8569178

发布正确答案永远不会太晚——事情总是在变化。
2021-05-21 16:48:58

在本期中，Kyle Robinson 建议使用该watch事件。将监视任务nospawn属性设置true为使其工作非常重要。我修改了他的解决方案以有选择地运行任务：

grunt.event.on('watch', function(action, filepath) {
    if (minimatch(filepath, grunt.config('watch.stylesheets.files'))) {
        grunt.config('compass.dist.options.specify', [filepath]);
    }

    if (minimatch(filepath, grunt.config('watch.scripts.files'))) {
        var uglifySrc = filepath.replace(grunt.config('uglify.dist.cwd'), '');
        grunt.config('jshint.dist.src', [filepath]);
        grunt.config('uglify.dist.src', [uglifySrc]);
    }
});

这是完整的解决方案：https : //gist.github.com/luissquall/5408257

https://github.com/tschaub/grunt-newer对于类似的任务看起来完全一样：

将 Grunt 任务配置为仅使用较新的文件运行。

概要：较新的任务将配置另一个任务以使用 a) 比 dest 文件新或 b) 比上次成功运行（如果没有 dest 文件）新的 src 文件运行。有关示例和更多详细信息，请参见下文。

您可以轻松地添加到任何任务。在你的情况下：

  grunt.loadNpmTasks('grunt-newer');
  grunt.registerTask('default', 'newer:coffee');
较新的插件对我来说效果很好……而且速度很快。
2021-05-12 16:48:58
其它你可能感兴趣的问题
上一篇如何使用 rxjs 在 angular2 中实现输入 keyup 事件的去抖动服务 下一篇如何使用 jquery 验证这种格式 (yyyy-mm-dd) 的日期？