Expressで適切にフォーマットされたHTMLを出力するにはどうすればよいですか?


165

Node.jsにExpressを使用すると、改行文字やタブなしでHTMLコードが出力されることに気付きました。ダウンロードする方が効率的かもしれませんが、開発中はあまり読みやすくありません。

Expressで適切にフォーマットされたHTMLを出力するにはどうすればよいですか?

回答:


313

あなたのメインapp.jsまたはその中にあるもの:

Express 4.x

if (app.get('env') === 'development') {
  app.locals.pretty = true;
}

Express 3.x

app.configure('development', function(){
  app.use(express.errorHandler());
  app.locals.pretty = true;
});

Express 2.x

app.configure('development', function(){
  app.use(express.errorHandler());
  app.set('view options', { pretty: true });
});

developmentの「醜い」でより効率的にしたいので、きれいなプリントを入れましたproductionNODE_ENV=production本番環境にデプロイするときは、必ず環境変数を設定してください。これはsh、「スクリプト」フィールドで使用し、package.json開始するために実行するスクリプトで実行できます。

Express 3 これを次の理由で変更しました。

「表示オプション」設定は不要になりました。app.localsはres.render()とマージされたローカル変数なので、[app.locals.pretty = trueはres.render(view、{pretty :true})。


1
これが正しい答えなので、これに対する受け入れられた答えを変更してください。
Val

これは働いていたが、私はつまり、余分な依存関係の束をインストールする必要がありましたpromiseuglify-jscss及びlexical-scope(それが構築するが、最初の要求でクラッシュします)それが再び実行されます前に。追加したのは1行だけです。
CWSpear 2013年

2
Express 4.xでそれを行う方法
アントニオサルバティ2014年

3
@AntonioSalvati tryapp.locals.pretty = true
Tan

1
これは素晴らしい答えです。まさに私が探していたものです。Expressの異なるバージョンでこれがどのように行われるかを確認するのは新鮮です。私は他の問題を検索しましたが、それがどのバージョンのExpressであるかについて言及していない回答を見つけました。
SnowInferno 2014年

50

Jade / Expressで「きれいなフォーマット」のhtml出力を作成するには:

app.set('view options', { pretty: true });

3
素晴らしい解決策!レイアウト/ページ間のインデントレベルにも一致することを望みます。
Stephen

34
時代遅れ。Express 3の動作は少し異なります。EhevuTovの投稿を参照してください。

7

Express 4.xでは、これをapp.jsに追加します。

if (app.get('env') === 'development') {
  app.locals.pretty = true;
}

ここで働いた-ありがとう!私の場合、「env」変数セットがありませんでした。次の1行でメインの.jsファイルに追加できます。process.env.NODE_ENV = 'development';
Gene Bo

他の答えがすでにこの解決策を与えているのに、なぜあなたはこの答えを与えているのですか?
nbro 2015年

私が最初にこの答えを出したが、他の答えは後で更新された。
2015年

6

Jade自体に「かなり」のオプションがあります。

var jade = require("jade");

var jade_string = [
    "!!! 5",
    "html",
    "    body",
    "        #foo  I am a foo div!"
].join("\n");

var fn = jade.compile(jade_string, { pretty: true });
console.log( fn() );

...これを取得します:

<!DOCTYPE html>
<html>
  <body>
    <div id="foo">I am a foo div!
    </div>
  </body>
</html>

私はそれほど洗練されているようには見えませんが、私が求めていること、つまりビューが生成するHTMLを実際にデバッグする機能については、問題ありません。


3
HTMLのデバッグだけで十分であれば、いつでもWebkitまたはFirebugインスペクターを使用してHTMLを「検査」できます。これにより、常に完全にフォーマットされたDOMツリーが生成されます。
Roshambo、2012年

@Roshamboは真実ですが、ツリーをナビゲートするのに時間がかかります。ソースをすばやくスキャンできる場合があります(時々)
Val

4

コンパイルにコンソールを使用している場合は、次のようなものを使用できます。

$ jade views/ --out html --pretty

0

本当にうまくフォーマットされたhtmlが必要ですか?あるエディタで見栄えの良いものを出力しようとしても、別のエディタでは奇妙に見えることがあります。確かに、HTMLが何のために必要なのかはわかりませんが、Chrome開発ツールまたはFirefoxのFirebugを使用してみます。これらのツールを使用すると、htmlではなくDOMを適切に表示できます。

本当に本当にうまくフォーマットされたhtmlが必要な場合は、jadeの代わりにEJSを使用してみてください。ただし、HTMLを自分でフォーマットする必要があります。


私はしばらくの間それを使ってきたので、ejsがもっと好きになりました。私はいくつかのことにとてもこだわっていると思います。
スティーブン

0

きちんと使えます

たとえば、このjadeファイルを見てみましょう。

foo.jade

h1 MyTitle

p
  a(class='button', href='/users/') show users

table
  thead
    tr
      th Name
      th Email
  tbody
    - var items = [{name:'Foo',email:'foo@bar'}, {name:'Bar',email:'bar@bar'}]
    - each item in items
      tr
        td= item.name
        td= item.email

これで、ノードtestjade.js foo.jade> output.htmlで処理できます。

testjade.js

var jade = require('jade');
var jadeFile = process.argv[2];
jade.renderFile(__dirname + '/' + jadeFile, options, function(err, html){
    console.log(html);
});

あなたにs.thを与えるでしょう お気に入り:

output.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title>My Title</title><link rel="stylesheet" href="https://stackoverflow.com/stylesheets/style.css"/><script type="text/javascript" src="../js/jquery-1.4.4.min.js"></script></head><body><div id="main"><div ><h1>MyTitle</h1><p><a href="/users/" class="button">show users</a></p><table><thead><tr><th>Name</th><th>Email</th></tr></thead><tbody><tr><td>Foo</td><td>foo@bar</td></tr><tr><td>Bar</td><td>bar@bar</td></tr></tbody></table></div></div></body></html

次に、tidy -m output.htmlで tidyを実行すると、次のようになります。

output.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content=
"HTML Tidy for Linux (vers 25 March 2009), see www.w3.org" />
<title>My Title</title>
<link rel="stylesheet" href="/stylesheets/style.css" type=
"text/css" />
<script type="text/javascript" src="../js/jquery-1.4.4.min.js">
</script>
</head>
<body>
<div id="main">
<div>
<h1>MyTitle</h1>
<p><a href="/users/" class="button">show users</a></p>
<table>
<thead>
<tr>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Foo</td>
<td>foo@bar</td>
</tr>
<tr>
<td>Bar</td>
<td>bar@bar</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>

0

オリバーの提案に基づいて構築された、美化されたhtmlを表示するためのすばやく汚れた方法

1)きちんとダウンロード

2)これを.bashrcに追加します

function tidyme() {
curl $1 | tidy -indent -quiet -output tidy.html ; open -a 'google chrome' tidy.html
}

3)走る

$ tidyme localhost:3000/path

openコマンドはMacでのみ機能します。お役に立てば幸いです。


インデントオプションについて知りませんでした...素敵です!私はvimの組み込みフォーマッターを使用していました。
オリバー

0

Express 4.xでは、これをapp.jsに追加します。

app.locals.pretty = app.get('env') === 'development';
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.