CODEWITHSUNDEEP
javascripthtmlnode.jspug
boggyn
boggyn

Reputation: 55

Jade(Pug) Html render output

I've recently installed Jade(Pug) on a Mac OS X Yosemite.

I installed the node.js last version and then used the terminal command: $ sudo npm install pug-cli -g

Everything was fine until i had to rendered the file. I created a test.pug file with the default pug code:

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.

and then used the terminal to render it to test it. I used the: $ pug -P test.pug and it rendered to the test.html and the output was like this:

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

Well now when i want to auto render it and used the -watch feature: $ pug -w test.pug it outputs like this:

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

I can't find a fix for this. To everyone else that i'm watching on youtube or other tutorials the output looks with the correct HTML structure but mine is rendered like a minified version.

What can i do to fix this and have it auto-rendered with the correct output in HTML?

Upvotes: 2

Views: 8295

Answers (2)

Iso
Iso

Reputation: 3238

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)

Upvotes: 6

xmikex83
xmikex83

Reputation: 965

Check http://jade-lang.com/api/.

There is a pretty parameter in every API methods (--pretty in CLI) which if enabled makes Jade outputs readable (pretty) HTML.

Upvotes: 0

Related Questions