2016-07-11 4 views
2

最近、Mac OS X YosemiteにJade(Pug)をインストールしました。ヒスイ(Pug)Htmlレンダリング出力

私はNode.jsのに最後のバージョンをインストールしてから、端末のコマンドを使用:私は、ファイルをレンダリングしなければならなかったまで$ sudo npm install pug-cli -g

すべてが大丈夫でした。私は、デフォルトのパグコードで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で正しい出力で自動レンダリングするにはどうすればよいですか?

答えて

5

最初のバリアント(-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) 
+0

ありがとうございました。できます。私は同時に2つの変種を使うことができるのか分からなかった。私はそれをつぶして使用しましたが、あなたの方法でも動作します。 – boggyn

0

チェックhttp://jade-lang.com/api/

すべてのAPIメソッド(CLIの--pretty)にはprettyというパラメータがあり、これを有効にするとJade出力が読みやすい(かなり)HTMLになります。

関連する問題