teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

2

ramdaを削除

2018/01/23 03:22

投稿

miyabi-sun
miyabi-sun

スコア21465

answer CHANGED
@@ -5,9 +5,8 @@
5
5
 
6
6
  ```JavaScript
7
7
  const pug = require('pug')
8
- const R = require('ramda')
9
8
 
10
- const html = `
9
+ const template = `
11
10
  doctype html
12
11
  body
13
12
  h1 test
@@ -17,17 +16,18 @@
17
16
  | test2
18
17
  `
19
18
 
20
- R.pipe(
19
+ const option = {
20
+ pretty: ' '
21
+ }
22
+ const data = {}
21
- it => pug.compile(it, {pretty: ' '}),
23
+ const html = pug.compile(template, option)(data)
22
- it => it({}),
23
- console.log
24
+ console.log(html)
24
- )(html)
25
25
  ```
26
26
 
27
27
  ```Bash
28
28
  $ npm init --yes
29
29
 
30
- $ npm install pug ramda
30
+ $ npm install pug
31
31
 
32
32
  $ node index.js
33
33
  <!DOCTYPE html>
@@ -70,9 +70,8 @@
70
70
 
71
71
  ```JavaScript
72
72
  const pug = require('pug')
73
- const R = require('ramda')
74
73
 
75
- const html = `
74
+ const template = `
76
75
  body
77
76
  h1 test
78
77
  p
@@ -81,11 +80,13 @@
81
80
  | test2
82
81
  `
83
82
 
84
- R.pipe(
83
+ const option = {
84
+ pretty: ' ',
85
- it => pug.compile(it, {pretty: ' ', doctype: 'html'}),
85
+ doctype: 'html'
86
+ }
86
- it => it({}),
87
+ const data = {}
88
+ const html = pug.compile(template, option)(data)
87
- console.log
89
+ console.log(html)
88
- )(html)
89
90
  ```
90
91
 
91
92
  ```Bash

1

誤字修正

2018/01/23 03:22

投稿

miyabi-sun
miyabi-sun

スコア21465

answer CHANGED
@@ -38,11 +38,8 @@
38
38
  ```
39
39
 
40
40
  質問者さんが求めている`<br>`が帰ってきました。
41
+ 次にindex.js内部のhtmlから`doctype html`を削って試してみます。
41
42
 
42
- ---
43
-
44
- では、index.js内部のhtmlから`doctype html`を削って試してみます。
45
-
46
43
  ```Bash
47
44
  $ node index.js
48
45
  <body>
@@ -52,17 +49,22 @@
52
49
  ```
53
50
 
54
51
  あら、今度は`<br/>`になりましたね。
55
- これはChromeやFirefox等のブラウザはXHTMLに対応しています。
56
- またHTML5は`<br/>`でも`<br>`でもどちらでも動くのに対して、XHTMLは`<br/>`でしか動作しませんので、
57
- 怖いからとりあえず`<br/>`にするかという設計思想のようです。
58
52
 
53
+ これにはちゃんとした理由があります。
59
- でちゃんとドキュメントイプ宣言しているテンプレートを食わせて上げれば問題ありせん
54
+ HTML5は`<br/>`・`<br>`両方を正式なグとして認識し
55
+ XHTMLは`<br/>`しか正式なタグとして認識しませんので`<br>`は文書の構文違反として取り扱われます。
60
56
 
57
+ PugとしてはHTML5かXHTMLかよくわからない場合は、
58
+ どちらでも対応出来る`<br/>`にするかという設計思想のようです。
59
+
60
+ なので`<br>`が欲しければ私はHTML5をコンパイルしているんだと明示しなければなりません。
61
+ ちゃんと1行目でドキュメントタイプ宣言していれば大丈夫でしょう。
62
+
61
63
  ---
62
64
 
63
65
  > 設定出来るオプション等は無いのでしょうか?
64
66
 
65
- gulp-pugではなく、[Pug公式の方のリファレンス](https://pugjs.org/api/reference.html)を見ました。
67
+ [Pug公式の方のリファレンス](https://pugjs.org/api/reference.html)を見ました。
66
68
  そこにはdoctypeというオプションが存在しているようです。
67
69
  早速適用してみます。
68
70
 
@@ -94,5 +96,7 @@
94
96
  </body>
95
97
  ```
96
98
 
97
- 明示的にHTMLだよと教えてあげると`<br>`を吐き出すようですね。
99
+ 明示的にHTMLだよと教えてあげると`<br>`を吐き出すようですね。
100
+ gulp-pugの方は調べていませんが、
101
+ gulp-xxxの内、大抵のライブラリはこのオプションを右から左へ受け渡しているだけなので、
98
- gulp-pugはしていませんが、大抵のライブラリはこのオプション項目をリレーしているだけなので`doctype: 'html'`を試してみてはどうでしょうか?
102
+ `doctype: 'html'`というオプション追加して試してみてはどうでしょうか?