注目キーワード

GulpでEJSからHTMLにコンパイルできるようにする

GulpでEJSからHTMLにコンパイルできるようにする
  1. HOME
  2. HTML
  3. GulpでEJSからHTMLにコンパイルできるようにする

GulpでEJSからHTMLにコンパイルできるようにするための環境構築を練習してみたときのことをメモがてらまとめました。

ejsファイルを修正してコンパイルしたhtmlファイルを、指定するフォルダに出力する流れを理解したくて練習するのが目的です。

 

  • GulpはNode.jsのビルドシステム。
  • EJSはJavaScriptを用いてHTMLを生成できるテンプレート言語。拡張子は.ejsです。

 

ルート/
├ src/
│ └ index.ejs
└ dest/ index.html

練習なのでフォルダ・ファイル構成もシンプルです。

/srcフォルダのindex.ejsをdestフォルダに.htmlに変換して出力。ということをGulpを使用して勉強。そしてコツを掴むのです。

 

目次

Gulpを使用する環境を整える

 

gulpはNode.jsのライブラリなためNode.jsをインストールします。

 

https://nodejs.org/en/

 

Node.jsの公式サイトでインストーラー(推奨版)をダウンロードしてPCにインストールです。

インストール後にnode.jsのバージョンを確認します。ターミナルやコマンドプロンプト、vscodeのターミナルなどで以下コマンドを入力し確認です。

$ node -v
v16.14.0

上記のようなvから始まるバージョンが表示されます。

 

npmというのも必要になります。npmとはNode.jsのパッケージを管理するシステムです。

npmはNode.jsをインストールした段階で自動でインストールされていますが、確認のためにバージョンをnpm -vで確認しておきます。

$ npm -v

ターミナルでコマンドnpm -vを実行してバージョンが表示されます。

 

これでGulpを使用する環境が整いました。

 

Advertisement

 

フォルダ＋ファイルの作成

 

GulpでEJSからHTMLにコンパイルできるようにするためのフォルダとファイルを作成します。

VScodeのターミナルを使用した場合を例にしています。

 

使用するフォルダとファイルの構成は、すごくシンプルです。分かりやすく練習するようにしたいので。

gulpTest/
├ src/
│ └ index.ejs
└ dest

 

デスクトップあたりにでもgulpTestフォルダを作成してから、vscodeを起動してドラック アンド ドロップで放り込みます。

そしてvscodeのターミナルをcommand+Jで起動するとgulpTestに移動できています。

 

ターミナルでsrcフォルダとdestフォルダを以下コマンドで作成します。

$ mkdir -p {dest,src}

 

作成したsrcフォルダにはindex.ejsというファイルを作成しておきます。

 

package.jsonも生成。package.jsonはgulpTestフォルダ直下にコマンドで生成します。

$ npm init -y

コマンドnpm init -yでpackage.jsonが作成できます。

 

Gulpとモジュールをインストール

 

次にgulpとgulpのモジュールをインストールです。

 

まとめてインストール

$ npm install -D gulp gulp-ejs gulp-rename gulp-replace gulp-plumber

(-D はディレクトリ単位インストール)

モジュールのインストールが終わったら、gulpTest直下にpackage.json、package-lock.jsonのファイルとnode_modulesフォルダができています。

 

package.jsonを確認。

"devDependencies": {
  "gulp": "^4.0.2",
  "gulp-ejs": "^5.1.0",
  "gulp-plumber": "^1.2.1",
  "gulp-rename": "^2.0.0",
  "gulp-replace": "^1.1.3"
}

devDependenciesに先程インストールしたgulpとモジュール名のバージョンが記述されています。

 

使用したモジュール

gulp-ejs
https://github.com/rogeriopvl/gulp-ejs

gulp-rename
https://github.com/hparra/gulp-rename

gulp-replace
https://github.com/lazd/gulp-replace

gulp-plumber
https://github.com/floatdrop/gulp-plumber

 

gulpもインストールしたのでバージョンを確認しておきます。

$ gulp -v

コマンドgulp -vで確認できます。「グローバルインストール」と「ローカルインストール」それぞれのバージョンが確認できるかと思います。

 

gulpfile.jsを作成

 

インストールしたgulpとモジュールは使用するためにgulpfile.jsを作成して読み込みます。

 

 

gulpfile.jsの作成場所はgulpTest直下に作成です。package.jsonやpackage-lock.jsonと同じ階層になります。

そしてgulpfile.jsでのモジュールの読み込みは以下のように記述します。

const gulp = require("gulp");
const rename = require("gulp-rename");
const ejs = require("gulp-ejs");
const replace = require("gulp-replace");
const plumber = require('gulp-plumber');

HTMLにコンパイルするタスクを記述

 

続いてgulpfile.jsにタスクを記述します。

// EJSコンパイル
const EJScompile = (done) => {
    gulp.src(["./src/*.ejs", "!./src/_*.ejs"])
      .pipe(plumber())
      .pipe(ejs({}, {}, { ext: '.html' }))
      .pipe(rename({ extname: '.html' }))
      .pipe(replace(/^[ \t]*\n/gmi, ''))
      .pipe(gulp.dest("./dest/"));
    done();
};

変数EJScompileにHTMLにコンパイルするタスクを記述しています。

gulpでコンパイルするタスクの記述は勉強を始めたばかりで理解不足ですが現時点で理解できていることを…

gulp.src(‘./src/*.ejs’)で実行ファイルの場所を指定。

第二引数はdestの「_（アンダーバー）」で始まるファイルを変換対象から除外。
例えば_header.ejsとか共通パーツを使用する場合は実行ファイル対象にならないようにです。

.pipe(プラグイン名())で動作。(pipeは勉強不足中)

コンパイルでファイル生成したhtmlファイルの出力場所は
.pipe(gulp.dest(‘ディレクトリ名’));で指定。

 

Advertisement

 

次にタスク化の記述です。

// タスク化
exports.EJScompile = EJScompile;

exports.タスク名 = 関数名という形式で関数をタスク化できます。

 

続いては監視タスクの記述。

// 監視ファイル
const watchFiles = (done) => {
    gulp.watch(["./src/*.ejs", "!./src/_*.ejs"], EJScompile);
    done();
};

gulp.watch()で監視するファイルを指定する部分です。

 

そしてタスク実行の記述。

// タスク実行
exports.default = gulp.series(
    watchFiles,EJScompile
);

 

これでGulpでEJSからHTMLにコンパイルすることがコマンドを実行するとできるようになります。

 

EJSからHTMLにコンパイル

 

それではEJSからHTMLにコンパイルするコマンドを実行してみよう。

 

$ gulp

gulpで実行します。

 

[22:25:13] Starting 'default'...
[22:25:13] Starting 'watchFiles'...
[22:25:13] Finished 'watchFiles' after 20 ms
[22:25:13] Starting 'EJScompile'...
[22:25:13] Finished 'EJScompile' after 21 ms
[22:25:13] Finished 'default' after 45 ms

ターミナルでStarting ‘watchFiles’…とかFinished ‘watchFiles’とかになってdestフォルダにindex.htmlが出力されていたら、GulpでEJSからHTMLにコンパイルできるようにすることができています。

index.ejsには、まだ何も記述していないので試しに次の記述をしてみます。

<p><%= 'Gulp EJS Compile'%></p>

 

するとdestに出力したindex.htmlには

<p>Gulp EJS Compile</p>

とHTMLにコンパイルされます。

 

watchでejsファイルを監視中なので停止するときはcontrol+Cで停止できます。

 

ちなみにnpm startで監視できるようにする場合はpackage.jsonのscriptに”start”: “gulp”を記述。

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "gulp"
},

 

これでnpm startとコマンドを実行すれば監視が始まります。

 

GulpでEJSからHTMLにコンパイルできるようにする環境を自分で構築してみたくて練習してみた今回の投稿。

実際に使用するには不足なモジュールなどありますが、gulp体験してみたことで、今まで理解できていなかったことが分かるようになってきました。

今回はejsだけでしたが、Sassのコンパイル環境を構築してみましたときのことも記事にまとめてみたので、興味がありましたら読んでみてくださませ。

 

GulpでSass(SCSS)をCSSにコンパイルできるようにする

 

 

HTMLカテゴリの最新記事