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

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

ただいまの
回答率

90.86%

  • Node.js

    1612questions

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

  • gulp

    246questions

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

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 2
  • VIEW 1,180

8070_nn

score 8

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」の内容です。

var gulp = require("gulp");
var gulpSass = require('gulp-sass');
var notify = require('gulp-notify');
var plumber = require('gulp-plumber');
var browserSync = require('browser-sync');
var ejs = require('gulp-ejs');

// 1. SASSをCSSに変換するタスク----------------------------
// gulp.task([第1引数:タスク名], [第2引数:タスクで行う処理])
gulp.task('sass', function(){
  gulp.src('sass/*.scss')
  // どのファイルを処理対象にするかのptn
  .pipe(plumber({errorHandler: notify.onError('<%- error.message %>')}))
  .pipe(gulpSass()) // pipe([処理内容])
  .pipe(gulp.dest('css')) // gulp.dest([書き出し先])
  .pipe(browserSync.reload({
    stream: true
  }));
});

// 2. リロードするだけのタスク-----------------------------
// browser-sync を使用
gulp.task('reload', function(){
  browserSync.reload();
});

// 3. デフォルトタスク------------------------------------
// ptnにマッチするファイルを監視し、変更のタイミングでタスクを実行
// browser-sync でオートリロードを実行
gulp.task('default', function(){
  browserSync({
    server: {
      baseDir: './'
    }
  });
  // gulp.watch(['app/ejs/common/*.ejs', '!node_modules'], ['html']);
  // gulp.watch(['app/ejs/*.ejs', '!node_modules'], ['html']);
  gulp.watch(['app/public/*.html', '!node_modules'], ['reload']);
  gulp.watch(['sass/*.scss', '!node_modules'], ['sass']);
  gulp.watch(['**/*.js', '!node_modules'], ['reload']);
});

//HTMLに変換して出力する---------------------------------
gulp.task("ejs", function() {
    gulp.src(
        //(1)EJSファイルの参照先ディレクトリ名
        //「’!’ + “app/dev/ejs/**/_*.ejs”」の部分で、「_(アンダーバー)で始まるejsファイルは参照し![イメージ説明](e01c1f2e2485417743f1c07449219411.png)設定を行っています。こうしておくことで、HTMLとして出力したくないファイルにはアンダーバーをつければよくなります
        ["app/ejs/**/*.ejs",'!' + "app/ejs/**/_*.ejs"]
    )
        //(2).pipe(ejs({}, {ext: '.html'}))に変更することで、.htmlファイルが生成されるようになった。
        .pipe(ejs({}, {ext: '.html'}))
        //(1)EJSファイルをHTMLに変換/出力する先のディレクトリ名を入れます。
        .pipe(gulp.dest("app/public"))
});


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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

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

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/01/04 02:04

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

    キャンセル

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

  • ただいまの回答率 90.86%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • Node.js

    1612questions

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

  • gulp

    246questions

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