在Windows上的Webstorm中自动编译Jade

我最近发现了翡翠,并想尝试一个新的静态网站。 我喜欢简洁的语法和模板function,比原始的HTML好多了。 我正在编辑Webstorm 6,它支持文件监视器,可以运行例如Sass。 我已经能够通过命令行运行Jade来观看我的Jade文件:

jade --watch --out public jade 

我现在试图在Webstorm中configuration我的项目来自动处理这个问题,而且我遇到了问题。

要保持源文件与生成的文件分开,我打算这样的布局:

      • 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(文件)

这是我第一次尝试使用文件观察器function,可用的macros令我感到困惑。 有没有经验的人在类似的情况下有什么build议?

Solutions Collecting From Web of "在Windows上的Webstorm中自动编译Jade"

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用于这个特定的项目布局将如下所示:

Jade文件观察者