gulp-ejsにおいてincludeが反映されない

gulp ejsで
ejsファイルをまとめてhtmlに起こしたい

gulpを使用して作業をしたいと思い

https://flex-box.net/gulp/
https://haniwaman.com/ejs/#EJS-2

こちらの2つのサイトが分かり易そうだったので
参考に進めてきたのですがgulp ejsコマンドしても
htmlファイルに変換はされるのですが_header.ejsと_footer.ejsがindex.ejsに
合わされません。
色々と他のサイトやパスの違いがないかを確認したのですが解決に
至らなかったので質問させていただきました。

まだ、始めたばかりで情報足らずかもしれませんが
宜しくお願いいたします。

一応、下記に実際に構築してたものの一部を載せておきます。

//gulpfile.js
gulp.task("ejs", (done) => {
gulp
.src(["ejs/**/*.ejs", "!" + "ejs/**/_*.ejs"])
.pipe( plumber({ errorHandler: notify.onError("Error: <%= error.message %>") }) )//エラーチェック
.pipe(rename({extname: ".html"})) //拡張子をhtmlに
.pipe(gulp.dest("./")); //出力先
done();
});

//_header.ejs
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href="<%= path %>/css/style.css">
<title><%= title %></title>
<meta name="description" content="<%= description %>">
</head>


<body>

//inde.ejs
<% var title = 'トップページのタイトルタグ'; %>
<% var description = 'トップページのディスクリプション'; %>
<% var path = '.'; %>
<% include ../common/_header %>

<!-- content -->
<div id="content">
<div class="inner">

<p>トップページに出力すること</p>

</div><!-- /inner -->
</div><!-- /content -->

2020/02/11〜

ご指摘の通り行ってみたのですが上手くいかなった為
他にも原因があるのかなと思い
改めてこちらに記載しております。
単純の自分のミスかもしれませんので自分でもケアレスミスがないかを確認しつつも
もし分かる方がいましたら
教えて頂けると幸いです。

//index.ejs
<% include /common/_header %>

<h1>Hello!</h1>

<% include ./common/_footer %>

//_header.ejs
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <header>
    <h1>hogehoge</h1>
  </header>

//gulp.file
var gulp = require('gulp');
var ejs = require("gulp-ejs");
var rename = require("gulp-rename"); //.ejsの拡張子を変更
var replace = require("gulp-replace");

gulp.task("ejs", done => {
  gulp
    .src(["src/ejs/**/*.ejs", "!src/ejs/**/_*.ejs"])
    .pipe(ejs({}, {}, { ext: ".html" }))
    .pipe(rename({ extname: ".html" }))
    .pipe(replace(/[\s\S]*?(<!DOCTYPE)/, "$1"))
    .pipe(gulp.dest("./dst/"));
  done();
//一部分を抜粋
});

また、実行後画像のように
PluginError [SyntaxError]等が表示されます…

どうぞ宜しくお願いいたします。

行動規範の内容に同意します

回答2件

<% include ../common/_header %>

../はLディレクトリ構造の一つ上の階層という指示になります。
index.ejsファイルからみて、commonは同じ階層にあるので
同じ階層を示す./に変更して、<% include ./common/_header %>にすれば先にすすめると思います。

拡張子の件

それどころじゃないので、
下記を読んで綺麗にしてから再現するか試してみてくださいね。

2つのサイトを見ましたが、なんじゃこりゃ？
一つ目のサイトはインデントがぐちゃぐちゃ……
二つ目のサイトはディレクトリ構造がぐちゃぐちゃ……

とはいえ、少々の手直しで格段によくなるはずです。
という訳でファイルの整理をしましょう。

まず吐き出し先は絶対にプロジェクトルートにしてはいけません。
プロジェクトルートに吐き出した場合、もしsrcというディレクトリが被ってしまうと元のファイルと成果物が混ざりますよね？
生成物を示すdst, dist, dest, public……とまぁWebエンジニアが名付けそうな名前を列挙しましたが、
そういう名称のディレクトリを作って流し込むようにしてください。

+ /
  + /src  <- ここに生成前のあれやらこれやらを入れるべき
    + /scss
    + /img
    + /ejs
      + /common
        - _header.ejs
      - index.ejs
  + /dst  <- ここに生成物が配置される(以下予定のイメージ)
    + /css
    + /js
    + /img
    - index.html
  - gulpfile.js
  - package.json

js
1gulp.task("ejs", done => {
2  gulp
3    .src(["src/ejs/**/*.ejs", "!src/ejs/**/_*.ejs"])
4    .pipe(ejs({}, {}, { ext: ".html" }))
5    .pipe(rename({ extname: ".html" }))
6    .pipe(replace(/[\s\S]*?(<!DOCTYPE)/, "$1"))
7    .pipe(gulp.dest("./dst/"));
8  done();
9});

投稿2020/02/10 13:56

miyabi-sun

総合スコア21203

ennyui

2020/02/11 12:44

ご回答ありがとうございます！丁寧かつ対応策を細かに提示して頂き分かりやすく助かります。その後、説明の通りに変更してみたのですが何故か変わらずgulp ejsコマンド後もindex.htmlの中身が空っぽの状態になってしまう状態です… 他の所にも原因があるのか自分の単純なミスなのかもしれませので自分の方でも再度、模索をしてみますがもし、また思い当たる部分があれば教えて頂けると幸いです。

行動規範の内容に同意します

https://haniwaman.com/ejs/#EJS-2 の参考サイトの場合、

javascript
1var gulp = require(“gulp”); // gulp本体
2var rename = require(“gulp-rename”); //  ファイル名の変更
3var ejs = require(“gulp-ejs”); //ejsの実行
4var replace = require(“gulp-replace”); // このgulpファイル上では使っていない
5
6gulp.task("ejs", (done) => {
7	gulp
8		.src([“ejs/**/*.ejs”, “!” + “ejs/**/_*.ejs”]) // .ejsのファイルに対して
9		.pipe(ejs({}, {}, {ext:’.html’})) // ejsの処理
10		.pipe(rename({ extname: “.html” })) // .htmlにrename
11		.pipe(gulp.dest(“./“)); // ファイルを出力
12	done();
13});

になっており、ennyuiさんのgulpfile.jsだと

javascript
1gulp.task(“ejs”, (done) => {
2gulp
3.src([“ejs/**/*.ejs”, “!” + “ejs/**/_*.ejs”])
4.pipe( plumber({ errorHandler: notify.onError("Error: <%= error.message %>") }) )//エラーチェック
5.pipe(rename({extname: ".html"})) //拡張子をhtmlに
6.pipe(gulp.dest("./")); //出力先
7done();
8});