Jade(Pug) Html 渲染输出答案

【问题标题】：Jade(Pug) Html render outputJade(Pug) Html 渲染输出
【发布时间】：2016-11-13 04:58:55
【问题描述】：

我最近在 Mac OS X Yosemite 上安装了 Jade(Pug)。

我安装了node.js上一个版本，然后使用终端命令：$ sudo npm install pug-cli -g

在我不得不渲染文件之前一切都很好。我用默认的 pug 代码创建了一个 test.pug 文件：

doctype html
html(lang="en")
  head
    title= pageTitle
    script(type='text/javascript').
      if (foo) bar(1 + 5)
  body
    h1 Pug - node template engine
    #container.col
      if youAreUsingPug
        p You are amazing
      else
        p Get on it!
      p.
        Pug is a terse and simple templating language with a
        strong focus on performance and powerful features.

然后使用终端渲染它来测试它。我使用了：$ pug -P test.pug，它渲染到了 test.html，输出是这样的：

<!DOCTYPE html>
<html lang="en">
  <head>
    <title></title>
    <script type="text/javascript">if (foo) bar(1 + 5)</script>
  </head>
  <body>
    <h1>Pug - node template engine</h1>
    <div class="col" id="container">
      <p>Get on it!</p>
      <p>
        Pug is a terse and simple templating language with a
        strong focus on performance and powerful features.
      </p>
    </div>
  </body>
</html>

现在当我想自动渲染它并使用 -watch 功能时： $ pug -w test.pug 输出如下：

<!DOCTYPE html><html lang="en"><head><title></title><script type="text/javascript">if (foo) bar(1 + 5)</script></head><body><h1>Pug - node template engine</h1><div class="col" id="container"><p>Get on it!</p><p>Pug is a terse and simple templating language with a
strong focus on performance and powerful features.</p></div></body></html>

我找不到解决此问题的方法。对于我在 youtube 或其他教程上观看的其他所有人，输出看起来具有正确的 HTML 结构，但我的输出看起来像缩小版本。

我可以做些什么来解决这个问题并让它自动呈现在 HTML 中的正确输出？

【问题讨论】：

标签： javascript html node.js pug

【解决方案1】：

您在第一个变体 (-P) 中设置的选项启用输出美化。如果您想在第二个变体上使用它，只需添加标志：pug -P -w test.pug

来自文档：

-h, --help             output usage information
-V, --version          output the version number
-O, --obj <path|str>   JavaScript options object or JSON file containing it
-o, --out <dir>        output the compiled html to <dir>
-p, --path <path>      filename used to resolve includes
-P, --pretty           compile pretty html output
-c, --client           compile function for client-side runtime.js
-n, --name <str>       the name of the compiled template (requires --client)
-D, --no-debug         compile without debugging (smaller functions)
-w, --watch            watch files for changes and automatically re-render
-E, --extension <ext>  specify the output file extension
--name-after-file      name the template after the last section of the file path
                       (requires --client and overriden by --name)
--doctype <str>        specify the doctype on the command line (useful if it
                       is not specified by the template)

【讨论】：

谢谢。有用。我不知道我可以同时使用 2 个变体。我设法将它与 grunt 一起使用，但它也适用于您的方法。

【解决方案2】：

检查http://jade-lang.com/api/。

每个 API 方法中都有一个 pretty 参数（CLI 中的 --pretty），如果启用该参数，则 Jade 输出可读（漂亮）HTML。

【讨论】：