Q&A
gulpでpugをコンパイルする時に、gulp-pugのプラグインを使っています。
pugで下記のように改行のテキストを書くと、htmlでの改行タグは <br /> のように出力されます。
p テキスト br | 改行テキスト
この改行タグの出力を <br /> ではなく、
<br> のようにするには、htmlを整形してくれるプラグイン（prettify系）を使うしか方法は無いのでしょうか？
pugを出力する時に、インデントをタブにする時はpugのtask内に pretty: '\t' を記述すれば変更出来るように、gulp-pugのtask内に設定出来るオプション等は無いのでしょうか？
回答2件
0
ベストアンサー
doctype宣言（文書宣言)はしていますか？
試しに下記のコードを書いて試してみました。
index.js
JavaScript
1const pug = require('pug') 2 3const template = ` 4doctype html 5body 6 h1 test 7 p 8 | test1 9 br 10 | test2 11` 12 13const option = { 14 pretty: ' ' 15} 16const data = {} 17const html = pug.compile(template, option)(data) 18console.log(html)
Bash
1$ npm init --yes 2 3$ npm install pug 4 5$ node index.js 6<!DOCTYPE html> 7<body> 8 <h1>test</h1> 9 <p>test1<br>test2</p> 10</body>
質問者さんが求めている<br>が帰ってきました。
次にindex.js内部のhtmlからdoctype htmlを削って試してみます。
Bash
1$ node index.js 2<body> 3 <h1>test</h1> 4 <p>test1<br/>test2</p> 5</body>
あら、今度は<br/>になりましたね。
これにはちゃんとした理由があります。
HTML5は<br/>・<br>の両方を正式なタグとして認識します。
XHTMLは<br/>しか正式なタグとして認識しませんので<br>は文書の構文違反として取り扱われます。
PugとしてはHTML5かXHTMLかよくわからない場合は、
どちらでも対応出来る<br/>にするかという設計思想のようです。
なので<br>が欲しければ私はHTML5をコンパイルしているんだと明示しなければなりません。
ちゃんと1行目でドキュメントタイプ宣言していれば大丈夫でしょう。
設定出来るオプション等は無いのでしょうか？
Pug公式の方のリファレンスを見ました。
そこにはdoctypeというオプションが存在しているようです。
早速適用してみます。
JavaScript
1const pug = require('pug') 2 3const template = ` 4body 5 h1 test 6 p 7 | test1 8 br 9 | test2 10` 11 12const option = { 13 pretty: ' ', 14 doctype: 'html' 15} 16const data = {} 17const html = pug.compile(template, option)(data) 18console.log(html)
Bash
1$ node index.js 2<body> 3 <h1>test</h1> 4 <p>test1<br>test2</p> 5</body>
明示的にHTMLだよと教えてあげると<br>を吐き出すようですね。
gulp-pugの方は調べていませんが、
gulp-xxxの内、大抵のライブラリはこのオプションを右から左へ受け渡しているだけなので、
doctype: 'html'というオプションを追加して試してみてはどうでしょうか？
投稿2018/01/23 03:12
編集2018/01/23 03:22
総合スコア21553
0
さて、何のために<br>で出力させたいのでしょうか。
ファイルサイズ縮小のためなら、別にプロセスするべきものではないかと思います。
なお、prettyオプションも、「ときどきバグを作り込む」ということで、廃止予定となっています（リファレンス）。
投稿2018/01/23 02:37
総合スコア146851
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2018/01/23 05:07