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

フロント開発のテンプレートエンジンECTをGulpでビルドする際にエラー詳細を出してマシにする

More than 5 years have passed since last update.

ect使ってますか? ect便利ですよね。

gulp-ectのエラー表示がしょぼい件

gulpでビルドするときにはgulp-ectっていうプラグインを使うと思います。ectの変更を監視して自動ビルドしてhtmlを吐き出す、みたいなことをよくやります。

ただgulp-ectでエラーが出ると

[09:58:17] Error gulp-ect: must start with number, buffer, array or string

って感じでエラーがおきたことは教えてくれるけど、

どこのファイルの何行目で何が起こったのかが全く分かりません。

これは問題ですね苦笑

対策①

ect使う時はect()を呼び出せばいいんですけど、

  //省略
  .pipe($.ect())
 //省略

ここに

 //省略
  .pipe($.ect({data: function (filename, cb) {
     console.log(filename);
     cb({foo: "bar"});
  }}))
//省略

てな感じで書いてあげると

template/index
[09:58:17] Error gulp-ect: must start with number, buffer, array or string

という感じでエラー対象ファイルが分かります。

ただ、まだ行数までは分かりません。

対策②

モジュール側をいじります。

gulp-ectをnpm installするとnode_modules/gulp-ect/index.jsがあると思います。

37行目くらいの

html.render(fileName, data, function (error, html) {
 file.contents = new Buffer(html);
 file.path = gutil.replaceExtension(file.path, opt.outExt);
});

この箇所にエラー表示を記述します。

html.render(fileName, data, function (error, html) {
 if(error) gutil.log(gutil.colors.red('Error gulp-ect detail: ' + error)); //←追記
 file.contents = new Buffer(html);
 file.path = gutil.replaceExtension(file.path, opt.outExt);
});

これでこんな感じで、

template/index
[09:58:17] Error gulp-ect: Failed to load template /Users/ryousuke/Sites/hackathon/gyo/template/common/_header2.ect in /Users/ryousuke/Sites/hackathon/gyo/template/index.ect on line 15
[09:58:17] Error gulp-ect: must start with number, buffer, array or string

エラー内容だったり、対象箇所だったりが表示されます。

独り言

github上の最新だと

error && gutil.log(gutil.colors.red('Error gulp-ect: ' + error.message));

って記述があってエラーを詳細に出してるみたいだけど、私の環境だとなぜかnpm installした段階でその記載が消えてました。

一応プルリクだしたけど...採用されるのかな

①はnode_modulesまでいじりたく無い人とか応急処置程度で使えるかも。
基本②をやっておけば問題無さそうです。

もっといいやり方あれば教えて下さい ><

n0bisuke
プロトタイピング専門スクール「プロトアウトスタジオ」で教えたりしてます。 プロフ -> https://dotstud.io/members/n0bisuke
https://protoout.studio
dotstudio
全ての人がモノづくりを楽しむ世界を目指して活動しています。 ( https://dotstud.io ) プロトタイピングスクールの運営をしています。
https://protoout.studio
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