使用 Grunt 将 Jade 编译到相关文件夹答案

【问题标题】：Compile Jade to Relative Folder with Grunt使用 Grunt 将 Jade 编译到相关文件夹
【发布时间】：2016-03-13 17:41:13
【问题描述】：

我正在使用 grunt 来编译我的 Jade 文件。我的文件夹结构是这样的

-blocks
    -header
        -jade
            header.jade
        -html
    -nav
        ...

我要做的是编译每个块的所有玉文件，然后将 html 文件发送到它们相应的 html 文件夹。我环顾四周，但似乎找不到任何东西。我对咕噜声比较陌生，所以我仍然掌握它。我在想我也许能够以某种方式使用 cwd 来实现这一点，但我真的不明白它是如何工作的。我在下面放了一些未经测试的代码/pseudo-ish

jade:{
    dist:{
        files:{
              src: "blocks/*/jade/*.jade", 
              dest: "html", 
              cwd: ?????? 
              ext: '.html'
             }
           }
       }

【问题讨论】：

标签： gruntjs pug grunt-contrib-jade

【解决方案1】：

没有魔法。我发现它将所有玉文件连接到一个 html。所以这是我能想到的解决方案：

var jadeDir = 'blocks/*/jade/';
var htmlSources = 'html';
var jadeTransforms = [];

//Read all the jade files and create a html file for each
//To create the jade files create a literal object with src, dest and ext for
 //each file
 var jadefiles = grunt.file.expand({cwd: jadeDir}, '*.jade');
 for (var i =0, len = jadefiles.length; i < len; i++) {
    var jadefile = jadefiles[i];
    jadeTransforms.push({
       src: jadeDir + jadefile,
       dest: htmlSources + jadefile.substring(0, jadefile.indexOf('.jade')) +  '.html',
       ext: "html"
   });
  }

.....

 // Here is my jade setup based on jadeTransforms
  jade:{
   dist:{
     files:jadeTransforms
   }
  }

【讨论】：