在Windows上自动编译Webstorm中的Jade

Question

我最近发现了Jade并且​​想尝试一个新的静态网站.我喜欢简洁的语法和模板功能,比原始HTML好得多.我正在编辑Webstorm 6,它支持文件观察者,并且可以开箱即用Sass.我已经能够通过命令行运行Jade来观看我的Jade文件:

jade --watch --out public jade

我现在正在尝试在Webstorm中配置我的项目来自动处理这个问题,而且我遇到了问题.

为了使源文件与生成的文件分开,我的目标是这样的布局:

• 根
  • 玉
    • index.jade
    • 子目录
      • subdir.jade
  • 上市
    • 的index.html
    • 子目录
      • subdir.html

将Arguments字段设置为:

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

首先,我在我的jade文件夹中有以下内容:

• index.jade
• 子目录
  • index.jade

我的public文件夹中的结果是:

• index.html(文件夹)
  • index.html(文件)
• subdir.html(文件夹)
  • subdir.html(文件)

这是我第一次尝试使用文件观察器功能,可用的宏让我感到困惑.有没有人在类似情况下有任何建议吗？

Answer 1

jade --out 选项指定目录,而不是文件:

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

要保留目录结构,您必须使用$FileDirPathFromParent$带参数的宏.

例如,对于C:\project\public\jade\subdir\subdir.jade文件,我们需要它将路径权限返回到jade目录,这将是宏的参数:$FileDirPathFromParent(jade)$,结果将是subdir.

现在,如果将Working目录设置为$FileDir$,则参数将为:

$FileName$ --out $ProjectFileDir$\public\$FileDirPathFromParent(jade)$

这个特定项目布局的完整Jade File Watcher如下所示: