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

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

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

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

Pug

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

Node.js

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

gulp

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

Q&A

解決済

1回答

913閲覧

フロントエンドの開発環境で、pugのコンパイルに失敗する。

hosodaaaaa

総合スコア47

npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

Pug

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

Node.js

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

gulp

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

0グッド

0クリップ

投稿2019/09/04 10:24

フロントの開発環境にて、pugをコンパイルエラーを解決したいです。

現在下記のディレクトリ構造でフロント環境を構築しています。

root ├── README.md ├── gulpfile.js ├── package-lock.json ├── package.json ├── gulp/ │ ├── tasks/ │ │ └── html.js │ └── config.js ├── dist/ │ ├── css/ │ └── index.html └── src/ ├── _partials/ │ ├── _footer.pug │ └── _header.pug ├── css/ │ └── main.sass ├── js/ │ └── main.js ├── _layout.pug └── index.pug

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

【_layout.pug】 doctype html block init - const title = meta.title || "" - const desc = meta.desc || "" - const path = meta.path || "./" - const url = "" head meta(charset="UTF-8") title = title meta(name="viewport", content="width=device-width, initial-scale=1.0") meta(http-equiv="X-UA-Compatible", content="ie=edge") meta(name="description", content="desc") meta(property="og:title" content=title) meta(property="og:type" content="website") meta(property="og:url" content=url) meta(property="og:image" content=`${url}`) meta(property="og:site_name" content=title) meta(property="og:description" content=desc) meta(property="twitter:title" content=title) meta(property="twitter:description" content=desc) link(rel="stylesheet", href=`${path}css/sanitize.sass`) link(rel="stylesheet", href=`${path}css/main.sass?v=${new Date().getTIme()}`) body include /_partials/_header main#main block contents include /_partials/_footer ------------------------------------------------- 【index.pug】 extends /_layout block init - const meta = { title: "" } const page = { id: "home" } block content ------------------------------------------------- 【config.js】 const path = require("path"); // edit dir path const src = { root: "./src", sass: "./src/css", pug: "./src", js: "./src/js", images: "./src/images" }; const dest = { root: "./dist", css: "./dist/css", html: "./dist", js: "./dist/js", images: "./dist/images" }; // pug settings const pugConfig = { basedir: src, pretty: true }; module.exports = { src, dest, pug: pugConfig }; ------------------------------------------------- 【html.js】 const gulp = require("gulp"); const pug = require("gulp-pug"); const plumber = require("gulp-plumber"); const progeny = require("gulp-progeny"); const config = require("../config"); // pug task gulp.task("pug", done => { gulp .src(`${config.src.pug}/**/[^_]*.pug`) .pipe(plumber()) .pipe(progeny()) .pipe(pug()) .pipe(gulp.dest(config.dest.html)); done(); });

該当のソースコード

ソースコード

試したこと

ここに問題に対して試したことを記載してください。

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

ここにより詳細な情報を記載してください。

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

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

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

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

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

guest

回答1

0

自己解決

自己解決しました。
単純にextendで継承しているパーシャル化したファイルのパスが、絶対パスの指定になっていたことが原因でした。

投稿2019/09/16 15:24

hosodaaaaa

総合スコア47

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問