【gulp】gulp-ejsでJSONファイルで管理したデータを用いてさくっとHTMLを出力する方法

#141 gulpというタスクランナーを使ってみる

データをJSONファイルで管理してそのデータをfor文で回したいと思い、調べたらgulpでejsテンプレートエンジンを動かす方法が出てきた。gulpは今まで何回か調べたことはあったが、実際に単体で仕様したことがなかったので、この機会に使ってみようと思った。

 

目次

[toc]

 

やりたいこと

JSONファイルでデータを管理し、そのデータを用いてJSの変数でHTMLを出力したい。

また、ファイルに変更があるたびにwatchして自動で出力したHTMLを書き換えてほしい。

 

使用したパッケージ

  • node.js 10.15.3
  • npm 6.4.1
  • gulp 4.0.2
  • gulp-ejs 4.1.2
  • gulp-plumber 1.2.1
  • gulp-rename 1.4.0

準備手順

任意の場所にディレクトリ作成してnpm初期化

フォルダを新しくして、そのファイルに移動して、

npm init

 

必要な諸々をインストール

gulpをインストールする

npm install gulp gulp-ejs gulp-plumber gulp-rename

gulp-plumberはエラー出力、gulp-renameは出力されるファイル名を変更(デフォルトだとejsファイルで出力されるため、htmlで出力したい場合)に使用する。

 

gulpfile.jsを作成

ルートディレクトリにgulpfile.jsを作成する。命名規約があるため、これ以外の名前はNG。

 

書き込むejsファイルとjsonファイルを作成

場所はどこでも可。名前もなんでも可。

先ほどのgulpfileと合わせて、このようなディレクトリ構造で今回は行う。

 

コーディング

gulpfile.js

// 変数定義
const EJS_FILE_PATH = './src/ejs/index.ejs'
const JSON_FILE_PATH = './src/json/index.json'
const BUILD_FILE_NAME = 'index.html'
const BUILD_DIRECTORY = './_build/'

// モジュール読み込み
const fs = require('fs') // JSのファイル読み込みモジュール
const gulp = require('gulp')
const plumber = require('gulp-plumber') // エラーハンドリング
const rename = require('gulp-rename') // ファイル名変更
const ejs = require('gulp-ejs') // テンプレートエンジン

// watchタスクを定義
gulp.task('watch', () => {
    gulp.watch([EJS_FILE_PATH, JSON_FILE_PATH], done => {
        const json = JSON.parse(fs.readFileSync(JSON_FILE_PATH))

        gulp.src(EJS_FILE_PATH)
        .pipe(plumber({
            handleError: function (err) {
                console.log(err)
                this.emit('end')
            }
        }))
        .pipe(ejs(json))
        .pipe(rename(BUILD_FILE_NAME))
        .pipe(gulp.dest(BUILD_DIRECTORY))

        done()
    })
})

 

index.ejs

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>gulp-htnl-generate</title>
</head>
<body>

</body>
</html>

 

index.json

{
  "aaa": {
    "name": "aaa",
    "type": 111
  },
  "bbb": {
    "name": "bbb",
    "type": 222
  },
  "ccc": {
    "name": "ccc",
    "type": 333
  },
  "ddd": {
    "name": "ddd",
    "type": 444
  }
}

 

jsonファイルはテキトーなデータをとりあえず例として入れている。これで準備は完了。

 

実際にhtmlを出力する

index.ejsで先ほどJSONで定義したデータを使用することができる。

コマンド

gulp watch

先ほどgulpfileで定義したwatchタスクを起動させるためのコマンド。

打ち込むことでファイルが監視され、変更されるたびにhtmlを再出力する。

 

コード

【出力前(ejs)】

index.ejs

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>gulp-htnl-generate</title>
</head>
<body>
 <p><%= aaa.name %></p>
 <p><%= bbb.type %></p>
</body>
</html>

 

【出力後(html)】

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>gulp-htnl-generate</title>
</head>
<body>
 <p>aaa</p>
 <p>222</p>
</body>
</html>

 

github

https://github.com/supunic/gulp-html-generate

 

参考

https://qiita.com/yuichiroharai/items/63b0769bc8ebe0220018

 

まとめ

gulp使ってみてよかった。タスクランナーの意味がしっくりきた。

以上ありがとうございました。

 

 

返信を残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA