teratail
回答率
85.48%
質問するログイン新規登録
トップPugに関する質問gulpでpugをコンパイルする時に、brタグの出力形式を変える方法

編集履歴

回答編集履歴

2

ramdaを削除

2018/01/23 03:22

投稿

miyabi-sun
miyabi-sun

スコア21158

test CHANGED
@@ -12,11 +12,9 @@
12
12
 
13
13
  const pug = require('pug')
14
14
 
15
- const R = require('ramda')
15
+
16
-
17
-
18
-
16
+
19
- const html = `
17
+ const template = `
20
18
 
21
19
  doctype html
22
20
 
@@ -36,15 +34,17 @@
36
34
 
37
35
 
38
36
 
39
- R.pipe(
37
+ const option = {
38
+
40
-
39
+ pretty: ' '
40
+
41
+ }
42
+
43
+ const data = {}
44
+
41
- it => pug.compile(it, {pretty: ' '}),
45
+ const html = pug.compile(template, option)(data)
42
-
43
- it => it({}),
46
+
44
-
45
- console.log
47
+ console.log(html)
46
-
47
- )(html)
48
48
 
49
49
  ```
50
50
 
@@ -56,7 +56,7 @@
56
56
 
57
57
 
58
58
 
59
- $ npm install pug ramda
59
+ $ npm install pug
60
60
 
61
61
 
62
62
 
@@ -142,11 +142,9 @@
142
142
 
143
143
  const pug = require('pug')
144
144
 
145
- const R = require('ramda')
145
+
146
-
147
-
148
-
146
+
149
- const html = `
147
+ const template = `
150
148
 
151
149
  body
152
150
 
@@ -164,15 +162,19 @@
164
162
 
165
163
 
166
164
 
167
- R.pipe(
165
+ const option = {
166
+
168
-
167
+ pretty: ' ',
168
+
169
- it => pug.compile(it, {pretty: ' ', doctype: 'html'}),
169
+ doctype: 'html'
170
+
170
-
171
+ }
172
+
171
- it => it({}),
173
+ const data = {}
174
+
172
-
175
+ const html = pug.compile(template, option)(data)
176
+
173
- console.log
177
+ console.log(html)
174
-
175
- )(html)
176
178
 
177
179
  ```
178
180
 

1

誤字修正

2018/01/23 03:22

投稿

miyabi-sun
miyabi-sun

スコア21158

test CHANGED
@@ -78,13 +78,103 @@
78
78
 
79
79
  質問者さんが求めている`<br>`が帰ってきました。
80
80
 
81
+ 次にindex.js内部のhtmlから`doctype html`を削って試してみます。
82
+
83
+
84
+
85
+ ```Bash
86
+
87
+ $ node index.js
88
+
89
+ <body>
90
+
91
+ <h1>test</h1>
92
+
93
+ <p>test1<br/>test2</p>
94
+
95
+ </body>
96
+
97
+ ```
98
+
99
+
100
+
101
+ あら、今度は`<br/>`になりましたね。
102
+
103
+
104
+
105
+ これにはちゃんとした理由があります。
106
+
107
+ HTML5は`<br/>`・`<br>`の両方を正式なタグとして認識します。
108
+
109
+ XHTMLは`<br/>`しか正式なタグとして認識しませんので`<br>`は文書の構文違反として取り扱われます。
110
+
111
+
112
+
113
+ PugとしてはHTML5かXHTMLかよくわからない場合は、
114
+
115
+ どちらでも対応出来る`<br/>`にするかという設計思想のようです。
116
+
117
+
118
+
119
+ なので`<br>`が欲しければ私はHTML5をコンパイルしているんだと明示しなければなりません。
120
+
121
+ ちゃんと1行目でドキュメントタイプ宣言していれば大丈夫でしょう。
122
+
81
123
 
82
124
 
83
125
  ---
84
126
 
85
127
 
86
128
 
129
+ > 設定出来るオプション等は無いのでしょうか？
130
+
131
+
132
+
133
+ [Pug公式の方のリファレンス](https://pugjs.org/api/reference.html)を見ました。
134
+
87
- では、index.js内部のhtmlから`doctype html`を削って試してみます。
135
+ そこにはdoctypeというオプションが存在しているようです。
136
+
137
+ 早速適用してみます。
138
+
139
+
140
+
141
+ ```JavaScript
142
+
143
+ const pug = require('pug')
144
+
145
+ const R = require('ramda')
146
+
147
+
148
+
149
+ const html = `
150
+
151
+ body
152
+
153
+ h1 test
154
+
155
+ p
156
+
157
+ | test1
158
+
159
+ br
160
+
161
+ | test2
162
+
163
+ `
164
+
165
+
166
+
167
+ R.pipe(
168
+
169
+ it => pug.compile(it, {pretty: ' ', doctype: 'html'}),
170
+
171
+ it => it({}),
172
+
173
+ console.log
174
+
175
+ )(html)
176
+
177
+ ```
88
178
 
89
179
 
90
180
 
@@ -96,7 +186,7 @@
96
186
 
97
187
  <h1>test</h1>
98
188
 
99
- <p>test1<br/>test2</p>
189
+ <p>test1<br>test2</p>
100
190
 
101
191
  </body>
102
192
 
@@ -104,92 +194,10 @@
104
194
 
105
195
 
106
196
 
107
- あら、今度は`<br/>`になりましたね。
108
-
109
- これはChromeやFirefox等のブラウザはXHTMLに対応しています。
110
-
111
- またHTML5は`<br/>`でも`<br>`でもどちらでも動くのに対して、XHTMLは`<br/>`でしか動作しませんので、
112
-
113
- 怖いからとりあえず`<br/>`にするかという設計思想のようです。
114
-
115
-
116
-
117
- なのでちゃんとドキュメントタイプ宣言しているテンプレートを食わせて上げれば問題ありません。
118
-
119
-
120
-
121
- ---
122
-
123
-
124
-
125
- > 設定出来るオプション等は無いのでしょうか？
126
-
127
-
128
-
129
- gulp-pugではなく、[Pug公式の方のリファレンス](https://pugjs.org/api/reference.html)を見ました。
130
-
131
- そこにはdoctypeというオプションが存在しているようです。
132
-
133
- 早速適用してみます。
134
-
135
-
136
-
137
- ```JavaScript
138
-
139
- const pug = require('pug')
140
-
141
- const R = require('ramda')
142
-
143
-
144
-
145
- const html = `
146
-
147
- body
148
-
149
- h1 test
150
-
151
- p
152
-
153
- | test1
154
-
155
- br
156
-
157
- | test2
158
-
159
- `
160
-
161
-
162
-
163
- R.pipe(
164
-
165
- it => pug.compile(it, {pretty: ' ', doctype: 'html'}),
166
-
167
- it => it({}),
168
-
169
- console.log
170
-
171
- )(html)
172
-
173
- ```
174
-
175
-
176
-
177
- ```Bash
178
-
179
- $ node index.js
180
-
181
- <body>
182
-
183
- <h1>test</h1>
184
-
185
- <p>test1<br>test2</p>
186
-
187
- </body>
188
-
189
- ```
190
-
191
-
192
-
193
- 明示的にHTMLだよと教えてあげると、`<br>`を吐き出すようですね。
197
+ 明示的にHTMLだよと教えてあげると`<br>`を吐き出すようですね。
198
+
194
-
199
+ gulp-pugの方は調べていませんが、
200
+
201
+ gulp-xxxの内、大抵のライブラリはこのオプションを右から左へ受け渡しているだけなので、
202
+
195
- gulp-pugはしていませんが、大抵のライブラリはこのオプション項目をリレーしているだけなので`doctype: 'html'`を試してみてはどうでしょうか？
203
+ `doctype: 'html'`というオプションを追加して試してみてはどうでしょうか？