似たようなhtmlを複数ページ制作するような案件があると思いますが、地道に複製して制作するのは非効率で管理も面倒でミスもしやすいです。 そこで今回はGulpとEJSというテンプレートエンジンを使用してJSONファイルに設定した値を読み込み、複数のhtmlファイルを量産する方法を備忘録を兼ねてご紹介します。 今回使用するもの 今回はGulpを使用してEJSを動かします。Gulpの導入方法などは検索するとたくさん記事が出てきますので、そちらをご確認下さい。 テンプレートエンジンであるEJSと、生成したファイルごとに名前を付与するリネーム用のプラグインを導入します。 gulp-ejs gulp-rename pages.json template.ejs gulp.js 各ファイルの設定 pages.json ユニークな値を格納するJSONファイルは下記の通りです。 { "pages": [ {
![Gulp + EJS + JSONを使用してhtmlファイルを量産する方法 | ブログ | Glatch(グラッチ) - 夫婦で活動するフリーランスWeb制作ユニット](https://cdn-ak-scissors.b.st-hatena.com/image/square/3e7c6c7e28e8b6b73081016d6237efac1bc18735/height=288;version=1;width=512/https%3A%2F%2Fglatchdesign.com%2Fwp%2Fwp-content%2Fuploads%2F2016%2F04%2Feyecatch_160417.gif)