在Windows上的Webstorm中自动编译Jade

我最近发现了Jade，想尝试一个新的静态网站。我喜欢简洁的语法和模板功能，比原始HTML要好得多。我在Webstorm 6中编辑，它支持文件监视程序，可以运行开箱即用的Sass。我可以通过命令行运行Jade来查看我的Jade文件：

jade --watch --out public jade

我现在正试图在Webstorm中配置我的项目来自动处理这个问题，但我遇到了一些问题

为了将源文件与生成的文件分开，我的目标是这样的布局：

• 根
  • 玉石
    • 翡翠索引
    • 细分
      • 翡翠
  • 公开的
    • index.html
    • 细分
      • subdir.html

参数字段设置为：

--out $ProjectFileDir$\public\$FileNameWithoutExtension$.html $FileDir$\$FileName$

首先，我的

jade

文件夹中有以下内容：

• 翡翠索引
• 细分
  • 翡翠索引

我的

public

文件夹中的结果是：

• index.html（文件夹）
  • index.html（文件）
• subdir.html（文件夹）
  • subdir.html（文件）

这是我第一次尝试使用file watcher功能，可用的宏让我感到困惑。有类似经验的人有什么建议吗？

jade--out

选项指定目录，而不是文件：

-O, --out <dir>    output the compiled html to <dir>

对于这个特定的项目布局，完整的Jade文件监视程序如下所示：

---

这是可行的，但带来了一个新问题--

public

目录结构扁平化

index.html

和

subdir.html

并排出现在

公共目录中。我本来希望维护目录结构…有什么建议吗？我已经更新了答案，结果变得更加棘手，尤其是缺少
$FileDirPathFromParent$
宏的文档，我必须查找。这就解决了问题。也适用于子目录，所以看起来不错！我看到的关于创建观察者的文档有点少，我当然没有找到您提供的链接。现在我开始了解Jade系统。谢谢，但是我已经在webstorm项目中将Jade作为节点模块，我在项目中找不到该模块中的Jade.cmd文件。我将Jade安装为npm，但我似乎没有Jade.cmd。从npm获得它的任何方法，或者我应该自己写它（我似乎有其他来自gulp、karma的cmd文件，它们很简单）。
$FileName$ --out $ProjectFileDir$\public\$FileDirPathFromParent(jade)$