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

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

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

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

gulp

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

Q&A

1回答

2176閲覧

gulp ejsで編集したファイルのみをhtmlに出力したい。

ddd9000

総合スコア4

EJS

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

gulp

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

0グッド

1クリップ

投稿2019/12/08 05:41

前提・実現したいこと

gulp ejs で 編集したファイルだけをコンパイルしたい。

発生している問題・エラーメッセージ

gulpでejsをhtmlにコンパイルしているのですが、一つのejsファイルを変更すると全てのejsファイルがhtmlにコンパイルされてしまいます。

フォルダ階層-------------
.
├── _src/
│ ├── index.html
│ └── about/
│ ├── index.html
│ └── profile.html
│ └── ejs/
│ ├── index.ejs
│ ├── about/
│ └── index.ejs
│ └── profile.ejs
├── gulpfile.js
├── node_modules
├── package.json

該当のソースコード

gulpfile.js

1// ディレクトリ設定 2var dir = { 3 src_main: '_src', // _srcフォルダ置き換え 4 dist: 'dist', // destフォルダ置き換え 5} 6 7gulp.task("ejs", function() { 8 return gulp.src( 9 [dir.src_main + '/ejs/{,**/}*.ejs','!' + dir.src_main + "/ejs/**/_*.ejs"] 10 ) 11 .pipe(plumber()) 12 .pipe(ejs({}, {}, { ext: '.html' })) 13 .pipe( gulp.dest( dir.src_main )); 14}); 15 16gulp.task('default', ['ejs'] 17gulp.watch([dir.src_main + '/ejs/{,**/}*.ejs],['ejs']); 18);

試したこと

下記の説明通りにも実践してみましたが、こちらで編集したejsファイルのみをhtmlに出力する事はできましたが、フォルダ階層を守ったまま出力する事ができませんでした。
https://makochin-web.net/2459.html

補足情報

gulp 3.9.1

ここにより詳細な情報を記載してください。

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

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

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

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

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

guest

回答1

0

gulp.dest の引数を、フォルダ階層が保たれるようにがんばって設定する方法です。
dir.src_main 等を使うと煩雑になって本質がわかりづらくなりそうだったので、無視して記述しています。)
もっと簡単に書くやり方がある気がしますが、こんな風にすればとりあえず動作はすると思います。

javascript

1const path = require('path'); 2 3gulp.task('watch', function() { 4 gulp.watch(['_src/ejs/**/*.ejs']).on('change', srcPath => { 5 gulp.src(srcPath) 6 .pipe(plumber()) 7 .pipe(ejs({}, {}, { ext: '.html' })) 8 .pipe(gulp.dest(path.join('_src', path.relative('_src/ejs', path.dirname(srcPath))))); 9 }); 10});

投稿2019/12/09 04:29

2KOH

総合スコア999

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問