在 Windows 上的 Webstorm 中自动编译 Jade

Posted 2023-03-15

【中文标题】在 Windows 上的 Webstorm 中自动编译 Jade

【英文标题】：Auto-compile Jade in Webstorm on Windows

【发布时间】：2013-03-07 17:19:50

【问题描述】：

我最近发现了 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（文件）

这是我第一次尝试使用文件观察器功能，可用的宏让我感到困惑。有遇到类似情况的人有什么建议吗？

【参考方案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 如下所示：

【讨论】：

这行得通，但带来了一个新问题——public 目录结构被扁平化了。 index.html 和 subdir.html 并排出现在 public directory 中。我曾希望维护目录结构...有什么建议吗？

我已经更新了答案，结果变得更加棘手，尤其是缺少 $FileDirPathFromParent$ 宏的文档，不得不寻找 tests in the IDE source code。

修复了它。也适用于子子目录，所以看起来不错！我看到的关于创建观察者的文档有点稀疏，我当然没有找到你提供的链接。现在我要搞清楚翡翠系统了。

谢谢，但是我已经在webstorm项目中有jade作为节点模块，在项目中找不到那个模块的jade.cmd文件

我已经将jade安装为npm，但我似乎没有jade.cmd。从 npm 获取它的任何方式还是我应该自己编写它（我似乎有其他来自 gulp、karma 的 cmd 文件，它们很简单）。