フロントの開発環境にて、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/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。