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

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

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

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

Windows

Windowsは、マイクロソフト社が開発したオペレーティングシステムです。当初は、MS-DOSに変わるOSとして開発されました。 GUIを採用し、主にインテル系のCPUを搭載したコンピューターで動作します。Windows系OSのシェアは、90%を超えるといわれています。 パソコン用以外に、POSシステムやスマートフォンなどの携帯端末用、サーバ用のOSもあります。

コードレビュー

コードレビューは、ソフトウェア開発の一工程で、 ソースコードの検査を行い、開発工程で見過ごされた誤りを検出する事で、 ソフトウェア品質を高めるためのものです。

gulp

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

Q&A

解決済

1回答

2070閲覧

Pugが突然変換されなくなりました (gulp使用)

mitrasi

総合スコア49

Pug

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

Windows

Windowsは、マイクロソフト社が開発したオペレーティングシステムです。当初は、MS-DOSに変わるOSとして開発されました。 GUIを採用し、主にインテル系のCPUを搭載したコンピューターで動作します。Windows系OSのシェアは、90%を超えるといわれています。 パソコン用以外に、POSシステムやスマートフォンなどの携帯端末用、サーバ用のOSもあります。

コードレビュー

コードレビューは、ソフトウェア開発の一工程で、 ソースコードの検査を行い、開発工程で見過ごされた誤りを検出する事で、 ソフトウェア品質を高めるためのものです。

gulp

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

0グッド

0クリップ

投稿2021/06/08 01:37

前提・実現したいこと

突然Pugが返還されなくなりました。
つい先ほどまでは上手く変換できていたのでフォルダや指示の構成ミスではないと思いますが、
おそらく、コメントアウトを試みた後から急にきかなくなったかに思います。

最初「//」のコメントアウトかと思い、「//-」なども試したところ全部コメントアウトみたいになったので、コメントアウトを外したところindex.htmlにコメントアウトがかかったままになり直せなくなったようです。

今回、下記該当の箇所以外は上手くコンパイルできたときのまま一切手を付けていないのでどちらかがおかしいのではないかと思い、gulpfile.js等は一旦割愛させて頂いております。
必要があればご指摘いただければ幸いです。

よろしくお願いします。

発生している問題・エラーメッセージ

C:(ディレクトリ)>cd C:(ディレクトリ) C:(ディレクトリ)>npm install -D gulp gulp-sass gulp-pug circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details. npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.7 (node_modules\chokidar\node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) npm WARN ntyuex@1.0.0 No description npm WARN ntyuex@1.0.0 No repository field. + gulp-pug@4.0.1 + gulp-sass@4.1.0 + gulp@4.0.2 updated 3 packages and audited 516 packages in 12.973s found 5 vulnerabilities (1 low, 2 moderate, 2 high) run `npm audit fix` to fix them, or `npm audit` for details C:(ディレクトリ)>npx gulp [10:24:26] Using gulpfile ~\Desktop\ntyuex\gulpfile.js [10:24:26] Starting 'default'...

該当のソースコード

Pug

1<!DOCTYPE html> 2html 3 body 4 head 5 link(rel='stylesheet', href="../src/css/reset.css") 6 link(rel='stylesheet', href="css/style.css") 7 link(rel='stylesheet', href="css/style.css") 8 link(rel='preconnect' href='https://fonts.gstatic.com') 9 10 11 main 12 header 13 .fv-wrapper 14 img.fv-img(src="../img/mainbg01.png", alt="石井旅館の風景") 15 16 section.section-wrapper 17 .content-wrapper 18 img.message-bg(src="../img/bg.png", alt="和紙一枚") 19 h3.message-title 温 海 温 泉 の<br>美 し さ に 癒 や さ れ て 20 p.text-inner 東 北 の 奥 座 敷 で あ る 温 海 温 泉 郷<br>開 湯 は 約 1 3 0 0 年 前 と さ れ 、 役 小 角 が<br>発 見 し た と 伝 え ら れ ま す 21 p.text-inner 石 井 花 壇 は 江 戸 よ り 続 く 由 緒 あ る 旅 館 で<br>ク ラ シ ッ ク な 作 り の 中 に 大 正 ロ マ ン あ ふ れ る<br>内 装 を 残 し て お り ま す 22 p.text-inner 圧 倒 的 癒 や し の 空 間 で<br>頑 張 る 現 代 人 に<br>頑 張 ら な い 圧 倒 的 な 非 日 常 を ご 提 供 し ま す<br> 23 p.name 石 井 花 壇 24 25 section.section-wrapper 26 .content-wrapper 27 .flex-box 28 img.message-bg(src="../img/oheya-top.png", alt="お部屋") 29 h3.section-title 喧騒から離れた空間<br> 心落ち着く至極のひととき 30 p.text まるで時が止まったかのような、圧倒的な静寂のなかで、 ひたすらにゆったりと…。 最高級の「何もしない時間」をお過ごしください。 31 a(class="btn") お部屋について 32 33 section.section-wrapper 34 .content-wrapper 35 .reverse 36 37 img.message-bg(src="../img/menu-top.png", alt="料理") 38 h3.section-title 出迎えるのは<br> 極上の温海料理 39 p.text 最も旬の食材を愉しむ、最高の贅沢を 最高級A5ランクの米沢牛と共に頂く。 あなたの人生史に残る「極上の感動」を お約束します。 40 a(class="btn") 料理について 41 42 section.section-wrapper 43 .content-wrapper 44 .flex-box 45 img.message-bg(src="../img/onsen-top.png", alt="温泉") 46 h3.section-title 疲れ切った身体にやすらぎを<br> 温海の源泉に癒やされて 47 p.text 古くは弘法大師の病をも治療したと言われる熱海の泉質。 現代人の疲弊しきった身体を修復する最高級の湯治場として ご活用ください。 48 a(class="btn") 温泉について 49 50 section.section-wrapper 51 .content-wrapper 52 img.message-bg(src="../img/bg.png", alt="和紙") 53 54 section.section-wrapper 55 .content-wrapper 56 img.message-bg(src="../img/bg02.png", alt="和紙") 57 .title-wrapper 58 img.title-icon(src="../img/logo02.png", alt="和紙") 59 h2.section-title おすすめご宿泊プラン 60 .menu-inner 61 dl.pran 62 img.menu(src="../img/menu01.png", alt="魚") 63 dt 朝食付きプラン、日本近海で取れた のどぐろを朝食として… 64 dd 最高級と称されるのどぐろ、正式には「アカ ムツ」と呼ばれる魚、味は独特の上品な味わ いで、焼いても煮ても美味 65 dl.pran 66 img.menu(src="../img/menu01.png", alt="魚") 67 dt 【期間限定】熱海蟹をたっぷりと 愉しむプラン。 68 dd 温海で水揚げされた蟹は「温海蟹」 として知られ、嗜好品として愛されて きました。この宿泊プランでは存分に 69 dl.pran 70 img.menu(src="../img/menu01.png", alt="魚") 71 dt 【平日限定】贅沢美味懐石プラン。 海辺の四季旬彩プラン。 72 dd 熱海近海で取れた魚を鮮度そのままに舟盛りに してご提供。生きた味をお楽しみください。 73 74 section.section-wrapper 75 .content-wrapper 76 img.message-bg(src="../img/bg3.png", alt="和紙") 77 .title-wrapper 78 img.title-icon(src="../img/logo02.png", alt="和紙") 79 h2.section-title お知らせ 80

HTML

1<!DOCTYPE html> 2<html> 3 <body> 4 <head> 5 <link rel="stylesheet" href="../src/css/reset.css"/> 6 <link rel="stylesheet" href="css/style.css"/> 7 <link rel="stylesheet" href="css/style.css"/> 8 <link rel="preconnect" href="https://fonts.gstatic.com"/> 9 </head> 10 <main> 11 <header> 12 <div class="fv-wrapper"><img class="fv-img" src="../img/mainbg01.png" alt="石井旅館の風景"/></div> 13 </header> 14 </main> 15 </body> 16</html> 17

該当のソースコード

CSS

1@import 'va'; 2*{ 3 box-sizing:border-box; 4 5} 6html{ 7font-size:62.5%; 8body{ 9 line-height:1.8; 10 width:100%; 11 font-size:1.6rem; 12font-family: '游明朝体', serif; 13 a{ 14text-decoration: none; 15} 16img{ 17max-width:100%; 18vertical-align: bottom; 19} 20.flex-box{ 21 display: flex; 22 justify-content: center; 23 align-items:center; 24} 25.reverse{ 26 flex-direction: row-reverse; 27 display: flex; 28 align-items:center; 29 justify-content: center; 30} 31} 32}

試したこと

npm audit
→ひとまずエラーメッセージ?で検索をかけてひっかかったこちらの記事を参考にやってみましたが変化なし

■コメントアウトになってしまっていたindex.html部分を消す
→一般的にコンパイル後の出力される方をいじるのはあまりよろしくないかと思いますが、相殺されているのかもと思って一応試してみましたが変化なしでした。
ちなみに現在のindex.htmlにある範囲に関してはきちんと表示されています(fv-img)

補足情報(FW/ツールのバージョンなど)

OS:Windows
エディタ:VScode
ブラウザ:クローム

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

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

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

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

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

guest

回答1

0

自己解決

すみません。自己解決しました。

Pugの書き方などにミスがありコンパイルエラーを起こしており、コンパイルができなくなっていただけでした。

投稿2021/06/08 11:04

mitrasi

総合スコア49

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問