在 Windows 上的 Webstorm 中自动编译 Jade [英] Auto-compile Jade in Webstorm on Windows

问题描述

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

I recently discovered Jade and want to give it a try for a new static website. I like the terse syntax and the templating capabilities, so much better than raw HTML. I'm editing in Webstorm 6, which has support for file watchers, and can run e.g. Sass out of the box. I've been able to run Jade via the command line to watch my Jade files:

jade --watch --out public jade

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

I'm now trying to configure my project in Webstorm to handle this automatically, and I'm running into problems.

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

To keep the source files separate from the generated ones, I'm aiming for a layout like this:

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

        参数字段设置为:

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

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

        To start with, I have the following within my jade folder:

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

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

          The result in my public folder is:

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

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

            This is the first time I've tried to use the file watcher feature, and the available macros are confusing me. Has anyone with experience in a similar situation any suggestions?

            推荐答案

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

            jade --out option specifies the directory, not the file:

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

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

            To retain the directories structure you will have to use $FileDirPathFromParent$ macro that takes a parameter.

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

            For example, for the C:\project\public\jade\subdir\subdir.jade file we need it to return the path right to the jade directory, that would be the parameter for the macro: $FileDirPathFromParent(jade)$, and the result would be subdir.

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

            Now if you set the Working directory to $FileDir$, the Arguments would be:

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

            针对此特定项目布局的完整 Jade File Watcher 如下所示:

            And the complete Jade File Watcher for this specific project layout would look like this:

            这篇关于在 Windows 上的 Webstorm 中自动编译 Jade的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！