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

投稿日:

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

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

 

目次

 

やりたいこと

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初期化

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

 

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

gulpをインストールする

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

 

gulpfile.jsを作成

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

 

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

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

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

 

コーディング

gulpfile.js

 

index.ejs

 

index.json

 

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

 

実際にhtmlを出力する

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

コマンド

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

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

 

コード

【出力前(ejs)】

index.ejs

 

【出力後(html)】

 

github

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

 

参考

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

 

まとめ

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

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

 

 

-プログラミング学習
-,

Copyright© s u p ? , 2019 All Rights Reserved.