Question

我最近在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中的正确输出自动渲染？

Answer 1

The option you’re setting in the first variant (-P) enables output prettification. If you want it on the second variant, just add the flag: pug -P -w test.pug

From the docs:

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

Answer 2

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

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

玉（Pug）Html渲染输出

2 个答案: