Help us understand the problem. What is going on with this article?

gulp-ectで「Failed to load template」とエラーが出て怒られる時の対処

More than 5 years have passed since last update.

前置き

他のテンプレートエンジンと比べて爆速だというect。
使いやすさもなかなかですが、長らく更新されていないのがちょっと残念ですね。

ectをgulpで使える「gulp-ect」もありますが、最初に困ることがあったのでメモします。
nodeとかnpmとかよく分かってないけど、とりあえず動くようにしたい人向けです。

現象

以下のようにテンプレートを継承しているファイルがあります。

<% extend 'layout.ect' %>

これがgulpfileで設定しているルートに置かれている場合は正常に動作するけど、
ディレクトリを作り、その下に置くと以下のようなエラーが出て怒られる。

Error gulp-ect: Failed to load template /path.../
Error gulp-ect: must start with number, buffer, array or string

テンプレートの読み込みに失敗しているようです。

※エラーメッセージの出し方は以下を参考にさせていただきました。
フロント開発のテンプレートエンジンECTをGulpでビルドする際にエラー詳細を出してマシにする

対処

node-module/gulp-ect 内の index.jsに1行変更を加えます。
26行目辺り

var fileName = gutil.replaceExtension(path.basename(file.path), "");

これを

var fileName = gutil.replaceExtension(file.path.split(filePath)[1], "");

と変更します。

原因とやったこと

正直私もイマイチわかっていませんが、、、
上の記述でファイルネームを設定し、ルートパス + ファイルネームの組み合わせで
出力するファイルを見にいくっぽいです。(ルートパスは別に設定されています)
で、既存の記述はファイルネームのみを設定します。

 /root/page1.ect という構造だったら page1 を設定。

でもこれだと /root/dir/page2.ect という構造でも page2 になってしまう。
結果、 /root/page2.ect というパスで見に行ってしまい、エラーで怒れらている。(ような気がします)

それなら dir/page2 にできればいいんじゃないの?ということで行ったのが上の変更です。

これで思った通りエラーはなくなり、更にディレクトリ構造を保ったまたdestすることが出来ました。
(ディレクトリ構造を保つようになったのはたまたま。狙ってません。でもラッキー♪)

がっつりデバッグしてないので詳細はわかっていませんが、最初に述べたように
とりあえず動かしたい方向けです。

bgn_nakazato
いつまでもビギナーなんです。
https://gieer.tech/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away