javascript - 如何有条件地编译(使用 Grunt)仅使用模板包含更改的 Jade 文件

Question

使用 grunt-contrib-watch 推荐的只编译更改文件的版本在这里:https://github.com/gruntjs/grunt-contrib-watch#compiling-files-as-needed

var changedFiles = Object.create(null);

var onChange = grunt.util._.debounce(function() {
grunt.config('jshint.all.src', Object.keys(changedFiles));
   changedFiles = Object.create(null);
}, 200);

grunt.event.on('watch', function(action, filepath) {
   changedFiles[filepath] = action;
   onChange();
});

这很好用(我在这里为它写了一个变体:https://gist.github.com/pgilad/6897875)

问题是在 Jade 模板中使用 include 时，这意味着您要包含其他 Jade 模板以构建完整的 html 文件。

使用单一解决方案进行编译是行不通的，因为如果您正在处理的 .jade 文件是使用 include current_working_jade.jade 嵌入的 - including文件不会被重新编译。

除了从头开始编译所有 jade 文件之外， 是否有任何解决方法？当您每次要编译大约 60 个大型 jade 文件时，这会导致问题。

我能想到的唯一可能的解决方案是在外部或目录中映射 jade 模板依赖关系，但我不知道有任何工具/插件可以做到这一点......

Answer 1

在已经开始在将生成一种 jade sourcemap 的脚手架上工作之后，我发现了这个很棒的项目，它已经解决了这个问题:

Jade Inheritance

用法如下:

1. 安装包使用:npm install jade-inheritance --save-dev

2. 你想从哪里获取 Jade 的依赖文件列表:

   var JadeInheritance = require('jade-inheritance');

   var inheritance = new JadeInheritance(file, basedirname, {basedir:basedirname});

3. 然后当你想获取文件时:

   depenedentFiles = inheritance.files;

4. 该项目还演示了如何将概念应用于 grunt.watch，以便仅编译更改的 jade 文件及其相关文件，这正是我所需要的:

Using jade-inheritance with grunt watch