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

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

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

EJSは、JavaScript用のテンプレートエンジン。HTMLなどのテンプレートテキストにJavaScriptのロジックを記述することができます。また、変数・関数の実行をテンプレートテキスト内に埋め込むことも可能です。

Node.js

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

gulp

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

Q&A

2回答

1889閲覧

ejs 共通パーツのインクルードをできるようにしたい

dfuji

総合スコア13

EJS

EJSは、JavaScript用のテンプレートエンジン。HTMLなどのテンプレートテキストにJavaScriptのロジックを記述することができます。また、変数・関数の実行をテンプレートテキスト内に埋め込むことも可能です。

Node.js

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

gulp

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

0グッド

0クリップ

投稿2020/02/15 04:23

編集2022/01/12 10:55

前提・実現したいこと

ejsとgulpタスクランナーを使いコーディングをしようと思っていましたが、共通パーツ(header,footer)のインクルードができずつまづいています。
パスやgulpfileなどを変更したりなどを試みましたがインクルードがされず index.ejsのまま出力されてしまいます。

##階層構成

イメージ説明

###index.ejsソースコード

<% include common/_header %> <body> <!-- content --> <div id="content"> <div class="inner"> <p>トップページに出力すること</p> </div><!-- /inner --> </div><!-- /content --> </body> <% include common/_footer %>

gulpfile.jsソースコード

var gulp = require('gulp'); var sass = require('gulp-sass'); //Sassコンパイル var plumber = require('gulp-plumber'); //エラー時の強制終了を防止 var notify = require('gulp-notify'); //エラー発生時にデスクトップ通知する var sassGlob = require('gulp-sass-glob'); //@importの記述を簡潔にする var browserSync = require( 'browser-sync' ); //ブラウザ反映 var postcss = require('gulp-postcss'); //autoprefixerとセット var autoprefixer = require('autoprefixer'); //ベンダープレフィックス付与 var cssdeclsort = require('css-declaration-sorter'); //css並べ替え var imagemin = require('gulp-imagemin'); var pngquant = require('imagemin-pngquant'); var mozjpeg = require('imagemin-mozjpeg'); var ejs = require("gulp-ejs"); var rename = require("gulp-rename"); //.ejsの拡張子を変更 // scssのコンパイル gulp.task('sass', function() { return gulp .src( './src/scss/**/*.scss' ) .pipe( plumber({ errorHandler: notify.onError("Error: <%= error.message %>") }) )//エラーチェック .pipe( sassGlob() )//importの読み込みを簡潔にする .pipe( sass({ outputStyle: 'expanded' //expanded, nested, campact, compressedから選択 }) ) .pipe( postcss([ autoprefixer( { // ☆IEは11以上、Androidは4.4以上 // その他は最新2バージョンで必要なベンダープレフィックスを付与する "overrideBrowserslist": ["last 2 versions", "ie >= 11", "Android >= 4"], cascade: false} ) ]) ) .pipe( postcss([ cssdeclsort({ order: 'alphabetically' }) ]) )//プロパティをソートし直す(アルファベット順) .pipe(gulp.dest('./src/css'));//コンパイル後の出力先 }); // 保存時のリロード gulp.task( 'browser-sync', function(done) { browserSync.init({ //ローカル開発 server: { baseDir: "./", index: "index.html" } }); done(); }); gulp.task( 'bs-reload', function(done) { browserSync.reload(); done(); }); 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(); }); // 監視 gulp.task( 'watch', function(done) { gulp.watch( './src/scss/**/*.scss', gulp.task('sass') ); //sassが更新されたらgulp sassを実行 gulp.watch('./src/scss/**/*.scss', gulp.task('bs-reload')); //sassが更新されたらbs-reloadを実行 gulp.watch( './src/js/*.js', gulp.task('bs-reload') ); //jsが更新されたらbs-relaodを実行 gulp.watch('./ejs/**/*.ejs',gulp.task('ejs') ) ; //ejsが更新されたらgulp-ejsを実行 gulp.watch('./ejs/**/*.ejs',gulp.task('bs-reload') ) ; //ejsが更新されたらbs-reloadを実行 }); // default gulp.task('default', gulp.series(gulp.parallel('browser-sync', 'watch'))); //圧縮率の定義 var imageminOption = [ pngquant({ quality: [70-85], }), mozjpeg({ quality: 85 }), imagemin.gifsicle({ interlaced: false, optimizationLevel: 1, colors: 256 }), imagemin.optipng(), imagemin.svgo() ]; // 画像の圧縮 // $ gulp imageminで./src/img/base/フォルダ内の画像を圧縮し./src/img/フォルダへ // .gifが入っているとエラーが出る gulp.task('imagemin', function () { return gulp .src('./src/img/base/*.{png,jpg,gif,svg}') .pipe(imagemin(imageminOption)) .pipe(gulp.dest('./src/img')); });

試したこと

gulpプラグインを再インストールなどを行いましたができませんでした。

npm install gulp-sass gulp-plumber gulp-notify gulp-sass-glob browser-sync gulp-postcss autoprefixer css-declaration-sorter gulp-imagemin imagemin-pngquant imagemin-mozjpeg gulp-ejs gulp-rename --save-dev

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

mac OS Catalina 10.15.2

node.js
v12.15.0

gulp
CLI version: 2.2.0
Local version: 4.0.2

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

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

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

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

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

guest

回答2

0

以前gulp-ejsを使ったことがあります。
こんな感じで動かしています。参考にしてください。

gulpfile.js

gulp.task('ejs', function () { return gulp.src(["ejs/**/*.ejs", '!' + "ejs/**/_*.ejs"]) .pipe(ejs({content:'コンテンツ'})) .pipe(rename({ extname: ".html" })) .pipe(gulp.dest("./")); });

index.ejs

<body> <%- include('common/_header.ejs') %> <%- include('common/_footer.ejs') %> </body>

_header.ejs

<div>Hello Header</div> <div><%= content %></div>

_footer.ejs

<div>Hello Footer</div> <div><%= content %></div>

gulp実行

$ npm run gulp ejs > gulptest@0.0.0 gulp /Users/Technocore/Desktop/gulptest > gulp "ejs" [15:24:10] Using gulpfile ~/Desktop/gulptest/gulpfile.js [15:24:10] Starting 'ejs'... [15:24:10] Finished 'ejs' after 26 ms

完成 (index.html)

<body> <div>Hello Header</div> <div>コンテンツ</div> <div>Hello Footer</div> <div>コンテンツ</div> </body>

投稿2020/02/15 06:34

technocore

総合スコア7200

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

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

dfuji

2020/02/15 07:20

ありがとうございます。上記で試してみたのですが、やはりコンパイルされませんでした。
technocore

2020/02/15 07:27

おそらく実行時に何らかのエラーメッセージが出ている思います。 エラーメッセージを調べて問題解決してみてください。
dfuji

2020/02/15 07:41 編集

エラーは出ておらず、いろいろ試してみたところ、 includeのパスを変更したらコンパイルされるようになりましたが、ejsで吐き出されるようになりました。 吐き出されたejsはheaderとfooterをインクルードした状態になっています。
technocore

2020/02/15 07:51

インクルードできたようなので、インクルードしたejsに値が渡せることも確認しましょう。 あとはファイル名を変えるだけです。gulp-renameを使ってください。
dfuji

2020/02/15 08:07 編集

.pipe(ejs(rename({ extname: '.html' }))) ここの書き方が間違えていたためejsで吐き出されてしまうようでした。 .pipe(rename({extname: '.html'})) に書き直したところ、htmlには吐き出されましたが、インクルードができなくなりました。
technocore

2020/02/15 08:16

おそらく他にも書き方を間違えている箇所があるのでしょう。 私の回答を参考にして見直してください。
dfuji

2020/02/15 08:21

.pipe(ejs()) .pipe(rename({extname: '.html'}))//拡張子をhtmlに 書き方を変更したところhtmlで正常にインクルードすることができました。 いろいろと教えてくださり、ありがとうございました。
technocore

2020/02/15 08:29

アドバイスですが、Gulp4系からgulp_task()メソッドは非推奨になりました。 gulp_task 非推奨 でgoogle検索すると新しい書き方を紹介したサイトがいくつも見つかりますので。 今のうちに新しい書式に移行しておくのもいいかと思います。
dfuji

2020/02/15 08:37

ありがとうございます。 gulp4系を確認して、対応できるように勉強します
guest

0

EJSのドキュメントにある書き方にするとどうでしょうか?
EJS -- Embedded JavaScript templates

ejs

1<%- include("common/_header") %> 2 3<body> 4 5<!-- content --> 6<div id="content"> 7<div class="inner"> 8 9<p>トップページに出力すること</p> 10 11</div><!-- /inner --> 12</div><!-- /content --> 13 14</body> 15 16<%- include("common/_footer") %>

[追記]
gulpfile.jsでejsのコンパイルをする設定が抜けていると思います。

js

1# 質問者さんの今のgulp.fileから抜粋 2 3gulp.task("ejs", (done) => { 4gulp 5.src(["ejs/**/*.ejs", "!" + "ejs/**/_*.ejs"]) 6.pipe( plumber({ errorHandler: notify.onError("Error: <%= error.message %>") }) )//エラーチェック 7.pipe(rename({extname: ".html"})) //拡張子をhtmlに 8.pipe(gulp.dest("./")); //出力先 9done(); 10});

gulp-ejsのREADMEにも書いてありますが、このような記述が必要です。

js

1# ejsを使うためのgulpファイルの設定例です。 2var ejs = require("gulp-ejs") 3 4gulp.src("./templates/*.ejs") 5   // 今の設定ファイルでは以下の記述が抜けています。 6 // ここから 7 .pipe(ejs({ 8 msg: "Hello Gulp!" 9 })) 10 // ここまで 11 .pipe(gulp.dest("./dist"))

gulpfile.jsにejsの設定を追加して、再度ビルドしてみてください。

参考リンク

投稿2020/02/15 04:41

編集2020/02/15 04:56
shgtkshruch

総合スコア665

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

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

dfuji

2020/02/15 04:54 編集

ありがとうございます。 試して見たところ、コードがそのまま出力されてしまいました。
shgtkshruch

2020/02/15 05:00

確認ありがとうございます。 コードがそのまま出力されたということは、ejsのコンパイル(HTMLへの変換処理)がうまくいっていないかもと思いました。 追記でgulpfile.jsについて書きました。
dfuji

2020/02/15 06:00

ありがとうございます、追記していただいたgulpfileでもコンパイルがうまくいきませんでした。
shgtkshruch

2020/02/15 07:45

なるほど。 質問の本文にejsのコンパイル設定を追加したgulpfile.jsをはっていただいてもいいですか?
dfuji

2020/02/16 03:01 編集

gulp.task("ejs", (done) => { gulp .src(["ejs/**/*.ejs", "!" + "ejs/**/_*.ejs"]) .pipe( plumber({ errorHandler: notify.onError("Error: <%= error.message %>") }) )//エラーチェック .pipe(ejs()) .pipe(rename({extname: '.html'}))//拡張子をhtmlに .pipe(gulp.dest("./dist")); //出力先 done(); }); ``` こちらのコードでできました。 いろいろと教えてくださりありがとうございました。
shgtkshruch

2020/02/15 08:35

解決できてよかったです〜!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問