質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Pug

Pug(旧Jade)とは、HTMLを書くためのテンプレートエンジン。タグで囲む必要がないなど記述を省略できるため、HTMLの記述が簡単になります。ファイル分割も可能で、変数やループなど便利な機能も備わっています。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

gulp

gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。

Q&A

0回答

1922閲覧

gulpでpugをコンパイルする時に複数HTMLを出力し、出力内容を変えたい

groco

総合スコア20

Pug

Pug(旧Jade)とは、HTMLを書くためのテンプレートエンジン。タグで囲む必要がないなど記述を省略できるため、HTMLの記述が簡単になります。ファイル分割も可能で、変数やループなど便利な機能も備わっています。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

gulp

gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。

0グッド

0クリップ

投稿2018/03/23 14:16

編集2018/03/23 14:18

下記ファイルを用意して、gulpでpugをコンパイルする時に本番環境用とテスト環境用の2種類のHTMLを出力しています。

その時に、テスト環境用のファイルでは「block header_sub」と「block content」の親要素に、
本番環境用のファイルでは「block content」の親要素に、「#wrap」を追加したいと考えております。
「prepend」を使用すればblockの直前に要素を追加できるというのを見つけたのですが、「prepend」だと空の「#wrap」がblockの直前に追加されてしまいました。
親要素として「#wrap」を追加する方法はないでしょうか?

gulpfile.jsでの対応方法を見つけることができなかったのですが、pugでの実現が難しい場合はgulpfile.jsでの設定で可能なのでしょうか?

【layout.pug】

pug

1doctype html 2html(lang='ja') 3 head 4 link(rel='stylesheet', href='style.css') 5 body 6 block header 7 #contents 8 block header_sub 9 block content 10 block footer_sub 11 block footer

【テスト環境用pug】

pug

1extend layout 2 3block header 4 include _header.pug 5 6block header_sub 7 include _header_sub.pug 8 9block content 10 p 11 コンテンツ内容が入ります 12 13block footer_sub 14 include _footer_sub.pug 15 16block footer 17 include _footer.pug

【本番環境用pug】

pug

1extend index 2 3block header 4block header_sub 5block footer_sub 6block footer

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問