Grunt watch：只编译一个文件而不是全部答案

【问题标题】：Grunt watch: compile only one file not allGrunt watch：只编译一个文件而不是全部
【发布时间】：2013-09-24 21:32:25
【问题描述】：

我有 grunt 设置将我所有的咖啡文件编译成 javascript，并使用动态映射维护所有文件夹结构，效果很好。

coffee: {
  dynamic_mappings: {
    files: [{
      expand: true,
      cwd: 'assets/scripts/src/',
      src: '**/*.coffee',
      dest: 'assets/scripts/dest/',
      ext: '.js'
    }]
  }
}

然后我想做的是使用 watch 编译任何更改的咖啡文件并仍然保持文件夹结构。这可以将上述任务与此监视任务一起使用：

watch: {
  coffeescript: {
    files: 'assets/scripts/src/**/*.coffee',
    tasks: ['coffee:dynamic_mappings']
  }
}

问题是，当一个文件发生变化时，它会将整个coffee目录再次编译成Javascript，如果它只编译被改变成Javascript的单个coffee文件，那就太好了。这在 Grunt 中是否自然可行，或者这是一个自定义功能。这里的关键是它必须保持文件夹结构，否则很容易。

我们正在使用自定义监视脚本，我正在尝试在 Grunt 上出售它们，但需要此功能才能做到这一点。

【问题讨论】：

这样的东西对你有用吗：Github link: Compiling Files As Needed？这里还有一个更有趣的讨论：Github link: Provide conditional support for file inclusion.
重复：stackoverflow.com/questions/16203741/…——但没有好的答案
几个月前我遇到了这个问题，并认为它不值得担心——grunt 只需要大约 2 秒就可以编译我所有的咖啡文件（大约 40 个）。
我们可能有大约 200 个，我的问题是我们当前的系统只编译改变的那个，所以我不能在一个更慢的系统上卖给任何人。
可能不可能像您所说的那样“自然地”，但是您可以为每个文件创建单独的目标（在coffee 和watch 任务中） - 对于 200 个文件，您可能想要动态地这样做，但这有点困难。

标签： node.js coffeescript gruntjs grunt-contrib-watch

【解决方案1】：

你可以使用类似下面的 Gruntfile。每当 CoffeeScript 文件发生更改时，它都会更新 coffee:dynamic_mappings 的配置以仅将修改后的文件用作 src。

此示例是grunt-contrib-watch readme 中示例的略微修改版本。

希望对你有帮助！

var path = require("path");
var srcDir = 'assets/scripts/src/';
var destDir = 'assets/scripts/dest/';

module.exports = function( grunt ) {
    grunt.initConfig( {
        coffee: {
            dynamic_mappings: {
                files: [{
                    expand: true,
                    cwd: srcDir,
                    src: '**/*.coffee',
                    dest: destDir,
                    ext: '.js'
                }]
            }
        },
        watch : {
            coffeescript : {
                files: 'assets/scripts/src/**/*.coffee',
                tasks: "coffee:dynamic_mappings",
                options: {
                    spawn: false, //important so that the task runs in the same context
                }
            }
        }
    } );

    grunt.event.on('watch', function(action, filepath, target) {
        var coffeeConfig = grunt.config( "coffee" );
        // Update the files.src to be the path to the modified file (relative to srcDir).
        coffeeConfig.dynamic_mappings.files[0].src = path.relative(srcDir, filepath);
        grunt.config("coffee", coffeeConfig);
    } );

    grunt.loadNpmTasks("grunt-contrib-coffee");
    grunt.loadNpmTasks("grunt-contrib-watch");

    grunt.registerTask("default", [ "coffee:dynamic_mappings", "watch:coffeescript"]);
};

【讨论】：

【解决方案2】：

从类似问题https://stackoverflow.com/a/19722900/1351350的答案中找到了解决方案

简短回答：试试https://github.com/tschaub/grunt-newer

【讨论】：

太棒了！最后，我可以只编译更改后的文件，并且仍然可以让 css livereload 正常工作！