在 Windows 上的 Webstorm 中自动编译 Jade

Question

我最近发现了 Jade，并想尝试创建一个新的静态网站。我喜欢简洁的语法和模板功能，比原始 HTML 要好得多。我在 Webstorm 6 中进行编辑，它支持文件观察器，并且可以运行例如开箱即用。我已经能够通过命令行运行 Jade 来查看我的 Jade 文件：

jade --watch --out public jade

我现在正尝试在 Webstorm 中配置我的项目以自动处理此问题，但我遇到了问题。

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

• 根
  • 玉
    • index.jade
    • 子目录
      • subdir.jade
  • 公开
    • index.html
    • 子目录
      • subdir.html

参数字段设置为：

--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。

现在，如果您将 工作目录 设置为 $FileDir$，则 参数 将是：

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

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