Gulp-ejsを使用してHTMLを効率化する

TOPGulpの知識Gulp-ejsを使用してHTMLを効率化する

Gulp-ejsのインストール
1. gulpfileに書き込む
ローカルで確認する用に便利な「browser-sync」
1. ejsとまとめて書くと・・
HTML上では書けなかった変数や条件分岐などが書ける！
まとめ

gulp-ejsを使用することで、HTML上でif文やincludeを用い、作業の効率化を図れます。

Gulp-ejsのインストール

npm i gulp gulp-ejs gulp-rename -D

「gulp」「gulp-ejs」「gulp-rename」を一気にインストールします。

gulpfileに書き込む

gulpfile.mjsを作成し、下記をコピペしてください。

import gulp from 'gulp';
import ejs from 'gulp-ejs';
import rename from 'gulp-rename';


const paths = {
  ejs: [
    'src/**/*.ejs', //.ejsと付くファイルまでのパス
    '!src/**/_*.ejs'//_が先頭についているejsファイルは対象外にする
  ],
  watch: {
    ejs: [
      'src/**/*.ejs', //.ejsと付くファイルまでのパスはすべて監視する
    ]
  }
}

function ejsFunc() {
  return gulp.src(paths.ejs)
    .pipe(ejs()) // ejsプラグインの実行
    .pipe(rename({ extname: '.html' })) // 出力ファイルの拡張子を変更
    .pipe(gulp.dest('dist'));
}

今回は配列を用いてpathの管理をします。

これだけでは動かないので次に「browser-sync」をインストールします。

ローカルで確認する用に便利な「browser-sync」

ローカルの環境で疑似的にサーバーにアップしたような動作確認ができる「browser-sync」もインストールします。

npm i browser-sync -D

ejsとまとめて書くと・・

下記をgulpfile.mjsにコピペし、準備ができたらコマンドプロンプトを開き「gulp」と打ち込んでEnterを押してください。
おそらくこれで「 http://localhost:8080/ 」が立ち上がるはずです。

ejsの準備はこれで整ったと思います！

import gulp from 'gulp';
import ejs from 'gulp-ejs';
import rename from 'gulp-rename';
import browserSync from 'browser-sync';


const paths = {
  ejs: [
    'src/**/*.ejs', //.ejsと付くファイルまでのパス
    '!src/**/_*.ejs'//_が先頭についているejsファイルは対象外にする
  ],
  watch: {
    ejs: [
      'src/**/*.ejs', //.ejsと付くファイルまでのパスはすべて監視する
    ]
  }
}

function ejsFunc() {
  return gulp.src(paths.ejs)
    .pipe(ejs()) // ejsプラグインの実行
    .pipe(rename({ extname: '.html' })) // 出力ファイルの拡張子を変更
    .pipe(gulp.dest('dist'));
}

function browserSyncFunc(done) {
  const browserSyncOption = {
    port: 8080,
    notify: false,
    server: {
      proxy: '127.0.0.1:3000',
      baseDir: 'dist/',
    },
    startPath: `/`,//特殊な例で確認したいページが、下層にあった場合に使用
    reloadOnRestart: true,
  };
  browserSync.init(browserSyncOption);
  done();
}

function browserReload(done) {
  browserSync.reload();
  done();
}

function watchFunc(done) {
  gulp.watch(paths.watch.ejs, gulp.series(ejsFunc, browserReload)); //ejsが更新されるたびにリロード
  done();
}

gulp.task('default', gulp.series(ejsFunc, browserSyncFunc, watchFunc));

HTML上では書けなかった変数や条件分岐などが書ける！

ejsではHTML上では書けなかった変数や、細かい条件分岐が書けます。

サンプルファイルとともに学ぶ

EJSを使うサンプルファイル

例えば

<!DOCTYPE html>
<html lang="ja">
<%
  var meta = {
    title: 'EJSを使う',
    description: 'ディスクリプション'
  };
  var ejsPath = './'; //ejsのpath・・下層であれば「 ../ 」と記述します。
%>
<head>
  <% /* Templatesディレクトリ内の_headを取得　読み込むテンプレートに変数を渡す */ %>
  <%- include(ejsPath + 'Templates/_head', { path:ejsPath, meta:meta }); %>
</head>

metaにtitle、descriptionを変数として設置
Templatesディレクトリ内に設置された「 _head.ejs 」ファイルを読み込み、「 _head.ejs 」内でも変数が活きるように{ path:ejsPath, meta:meta }で渡しています。

<meta charset="UTF-8">
<title><%= meta.title %></title>
<meta name="description" content="<%= meta.description %>">
<meta name="format-detection" content="telephone=no, email=no, address=no">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- //ogp設定やcss等を読み込むのはこちら -->
<link rel="stylesheet" href="css/style.css">

「 _head.ejs 」内で送られてきた変数を活用するために<%= meta.title %>と、<%= meta.description %>をそれぞれ設置し、それがHTML上に反映されるようになっています。

共通ヘッダー、フッターの更新も簡単に

ただのHTMLでは面倒くさかったグローバルナビゲーションの更新も全ページまたがなくても変更でき、手間がかなり減り簡単になります。


<body>
<div class="l-container" id="return-top">
  <% /* Templatesディレクトリ内の_headerを取得　読み込むテンプレートに変数を渡す */ %>
  <%- include(ejsPath + 'Templates/_header', { path:ejsPath, meta:meta }); %>

  <% /* Templatesディレクトリ内の_footerを取得　読み込むテンプレートに変数を渡す */ %>
  <%- include(ejsPath + 'Templates/_footer', { path:ejsPath, meta:meta }); %>
</div><!-- /.l-container -->
<% /* Templatesディレクトリ内の_footを取得　読み込むテンプレートに変数を渡す */ %>
<%- include(ejsPath + 'Templates/_foot', { path:ejsPath, meta:meta }); %>
</body>
</html>

_headerの中身はこんな感じ

<header class="l-header">
  <div class="l-header_wrap">
    <h1 class="l-header_logo"><a href="<%= path %>"><%= meta.title %></a></h1>
  </div>
  <nav class="global-nav">
    <ul>
      <li><a href="<%= path %>underpage/">ページ１</a></li>
      <li><a href="<%= path %>underpage/">ページ２</a></li>
    </ul>
  </nav>
</header>

<%= path %>で、相対的なパスを取得、<%= meta.title %>で現在のページタイトルを取得

「 _header.ejs 」を変更さえすれば全ページに変更した内容が反映されるので管理がかなり楽になります。

_footerの中身はこんな感じ

<footer class="l-footer">
  <small class="l-footer_copyright">sitename all right reserved.</small>
</footer>

まとめ

以上のようにejsを使用することでHTMLの管理が非常に楽になり、更新の手間が格段に減ります。

近年ではCMS（Wordpressなどのブログシステム）などが出てきていますが特に頻繁に更新する必要がない場合などはこちらのejsを用いた管理で静的HTMLの運用をしてみるのもいいのではないでしょうか？
軽いですしね！

EJSを使うサンプルファイル

最後にもう一度サンプルだけ置いておきます。

他にもいろいろとできることはあるので紹介していけたらと思います。

それでは良いコーディングライフを！

Gulpを使用した便利タスク