🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
EJS

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

gulp

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

Q&A

解決済

1回答

2431閲覧

ejsをwatchできない

sanco

総合スコア20

EJS

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

gulp

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

0グッド

0クリップ

投稿2019/11/11 04:10

表題の件、下記コードで実行しているのですが、
ejsだけ無反応でコンパイルされません。(sass、babelはきちんと処理されます)

watchをejsだけ(sass、babelはコメントアウト)に変更しても処理されませんでしたが、
watchではなく、普通にejsを実行するとコンパイルされました。

ejsとwatchの相性が悪いのでしょうか?
できれば、ejs、sass、babelを常に監視させておきたいのですが、
どこに問題があるのかわからず質問させていただきました。
どうぞよろしくお願いいたします。

長くなりすぎるので、関係なさそうなrequireやタスクの記述は省きました。
足りない情報等あれば追記いたしますので、ご指摘いただければと思います。
よろしくお願いいたします。

node v8.11.2
gulp ^3.9.1

gulp

1 2var gulp = require('gulp'); 3var plumber = require('gulp-plumber'); 4var rename = require('gulp-rename'); 5var sass = require('gulp-sass'); 6var fs = require( 'fs' ); 7var ejs = require("gulp-ejs"); 8var replace = require('gulp-replace'); 9 10//ejs 11gulp.task('ejs', function() { 12 var json = JSON.parse(fs.readFileSync("./ejs/includes/*.json","utf-8")); 13 gulp.src( 14 ["./ejs/**/*.ejs",'./ejs/**/*.json', '!' + "./ejs/**/_*.ejs"] 15 ) 16 .pipe(plumber()) 17 .pipe(ejs({json:json})) 18 .pipe(rename({ 19 extname: ".html" 20 })) 21 .pipe(gulp.dest("./")); 22}); 23 24gulp.task('default', function () { 25 gulp.watch('./sass/*.scss', ['sass']); 26 gulp.watch('./es6/*.js', ['babel']); 27 gulp.watch('./ejs/*.js', ['ejs']); 28});

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

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

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

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

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

guest

回答1

0

ベストアンサー

監視しているファイルがejsファイルではなくjsだからではありませんか?

javascript

1gulp.watch('./ejs/*.ejs', ['ejs']);

投稿2019/11/11 04:16

nt4c

総合スコア768

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

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

sanco

2019/11/11 04:29 編集

ありがとうございます!! 初歩的すぎる見落としでお恥ずかしです。 また、重ねての質問になってしまい恐縮ですが、下記のようなエラーが出てしまいました。 何かお気づきになる点などございましたら教えていただけないでしょうか。 Error: ENOENT: no such file or directory, open 'E:\myproject\test\ejs\includes*.json'at Object.fs.openSync (fs.js:646:18)
nt4c

2019/11/11 04:34

存在しないファイルまたはディレクトリを参照している時のエラーです。 思い当たりそうな箇所を確認してみてください。
date

2019/11/11 05:11

*.jsonではないと思うので fs.readFileSync の所はファイル名を指定しないとだめなのでは
sanco

2019/11/11 06:42

ありがとうございます。 ファイルの参照に問題があったようで、date様のおっしゃる通りファイル名の指定で解決できました! お二方とも本当にありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.36%

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

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

質問する

関連した質問