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

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

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

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

gulp

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

Q&A

解決済

1回答

5711閲覧

保存することでejsをhtmlにコンパイルすると同時にブラウザまで自動でオートリロードさせたい

8070_nn

総合スコア12

Node.js

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

gulp

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

0グッド

4クリップ

投稿2017/01/03 12:04

編集2017/01/03 12:30

gulp-ejsをインストールすることで、「index.ejs」を「index.html」にコンパイルすることができました。ただ、コンパイルするためにはターミナルで「$ gulp ejs」を毎度打ち込まないと「index.html」に反映がされません。

sassやjsが自動でリロード&コンパイルするように記述はすでにしていて、
「$ gulp」のみをターミナルで打ち込めば保存と同時にブラウザに自動反映されます。
また、「index.html」のみの変更であればそれも保存と同時にブラウザに自動反映されます。

できれば ターミナルで「$ gulp ejs」を打たずに、
html内に共通化の部分である「_head.ejs」や「_footer.ejs」を保存と同時に「index.ejs」に自動に読み込ませ、その読み込ませた「index.ejs」を「index.html」に自動でコンパイルし、
ブラウザに自動で反映するようにしたいと考えています。

調べてもなかなか全てをオート化ができずに困っています。
どなたかアドバイスをいただけないでしょうか?

以下が「gulpfile.js」の内容です。

js

1var gulp = require("gulp"); 2var gulpSass = require('gulp-sass'); 3var notify = require('gulp-notify'); 4var plumber = require('gulp-plumber'); 5var browserSync = require('browser-sync'); 6var ejs = require('gulp-ejs'); 7 8// 1. SASSをCSSに変換するタスク---------------------------- 9// gulp.task([第1引数:タスク名], [第2引数:タスクで行う処理]) 10gulp.task('sass', function(){ 11 gulp.src('sass/*.scss') 12 // どのファイルを処理対象にするかのptn 13 .pipe(plumber({errorHandler: notify.onError('<%- error.message %>')})) 14 .pipe(gulpSass()) // pipe([処理内容]) 15 .pipe(gulp.dest('css')) // gulp.dest([書き出し先]) 16 .pipe(browserSync.reload({ 17 stream: true 18 })); 19}); 20 21// 2. リロードするだけのタスク----------------------------- 22// browser-sync を使用 23gulp.task('reload', function(){ 24 browserSync.reload(); 25}); 26 27// 3. デフォルトタスク------------------------------------ 28// ptnにマッチするファイルを監視し、変更のタイミングでタスクを実行 29// browser-sync でオートリロードを実行 30gulp.task('default', function(){ 31 browserSync({ 32 server: { 33 baseDir: './' 34 } 35 }); 36 // gulp.watch(['app/ejs/common/*.ejs', '!node_modules'], ['html']); 37 // gulp.watch(['app/ejs/*.ejs', '!node_modules'], ['html']); 38 gulp.watch(['app/public/*.html', '!node_modules'], ['reload']); 39 gulp.watch(['sass/*.scss', '!node_modules'], ['sass']); 40 gulp.watch(['**/*.js', '!node_modules'], ['reload']); 41}); 42 43//HTMLに変換して出力する--------------------------------- 44gulp.task("ejs", function() { 45 gulp.src( 46 //(1)EJSファイルの参照先ディレクトリ名 47 //「’!’ + “app/dev/ejs/**/_*.ejs”」の部分で、「_(アンダーバー)で始まるejsファイルは参照し![イメージ説明](e01c1f2e2485417743f1c07449219411.png)設定を行っています。こうしておくことで、HTMLとして出力したくないファイルにはアンダーバーをつければよくなります 48 ["app/ejs/**/*.ejs",'!' + "app/ejs/**/_*.ejs"] 49 ) 50 //(2).pipe(ejs({}, {ext: '.html'}))に変更することで、.htmlファイルが生成されるようになった。 51 .pipe(ejs({}, {ext: '.html'})) 52 //(1)EJSファイルをHTMLに変換/出力する先のディレクトリ名を入れます。 53 .pipe(gulp.dest("app/public")) 54}); 55

ディレクトリ構成はこちらです。
イメージ説明

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

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

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

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

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

guest

回答1

0

ベストアンサー

ただコードを眺めていて思っただけなのですが、

// gulp.watch(['app/ejs/common/*.ejs', '!node_modules'], ['html']);

// gulp.watch(['app/ejs/*.ejs', '!node_modules'], ['html']);

コメントアウトしているこの行を復活させてタスク名を ejs にしても動かないのでしょうか?

javascript

1 gulp.watch(['app/ejs/common/*.ejs', '!node_modules'], ['ejs']); 2 gulp.watch(['app/ejs/*.ejs', '!node_modules'], ['ejs']);

投稿2017/01/03 13:06

mit0223

総合スコア3401

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

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

8070_nn

2017/01/03 17:04

gulp.watch(['app/ejs/common/*.ejs', '!node_modules'], ['ejs']); gulp.watch(['app/ejs/*.ejs', '!node_modules'], ['ejs']); を打ち込んだ後うごきました!! ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問