kinalogスマートフォン用の表示で見るkinalog自称フロントエンドエンジニアが何か喚いています。HTML似たようなファイルをたくさん作る機会があったんだけど、面倒だし後から更新するのも大変。そこで、GulpとEJSを使って、JSONファイルの設定を読み込んで、その設定の分だけHTMLファイルを生成する方法はないかと探してみたところ、やっぱりありました。aircolor.hatenablog.comただ個人的に、いっぱいタスク作るのってどうなんだろう...と思ったので、1個のタスクにまとめてみることに。用意するものgulpは入れてある前提。fsgulp-ejsgulp-rename下記は新しく作ります。pages.json(各ページの設定用ファイル)template.ejs(テンプレートEJSファイル)各ファイルの設定pages.jsonそれぞれのページの設定を記述。]}ここのidの項目がそのままファイル名になる。template.ejs生成するページのテンプレート。jsonData;」でJSONの設定を読み込んでるので、あとはタイトルが欲しければdata.titleとか自分で設定した設定値が読み込める。}});nodeのファイルシステムのモジュールのfsでJSONを同期的に読み込んで処理。JavaScriptなので、JSONのパースはJSON.parseでらくちん。配列として扱えるので、pages.jsonで設定した数だけ勝手にループしてくれます。json-htmlと叩いてあげれば「(id).html」っていうファイルを生成してくれる。watchしてもうまくいくとは思うけど、他とは違って変更したファイルだけ更新ってことができないから、変更の度にコマンド叩いたほうが良いとは思う。本当はコマンドライン引数でJSONファイルとEJSファイルを指定できたら汎用性高まるかなと思ったんだけど、方法がわからず断念...まあ他の設定項目もどうせ案件ごとに変えるから、このままでもいいかな。21:14Gulp+EJS+JSONからHTMLファイルを生成するTweet広告を非表示にする関連記事2015-10-21改良版・gulp-compassで色んな階層のsassをwatch以前、gulp-compassで色んな階層のsassをwatchする方法を書きま...2015-06-19Grunt使いこなしてないけど、GulpでCompass入れてみた前の記事で導入してみたので、今度は使ってみます。手始...2015-06-03Grunt使いこなしてないけど、Gulp導入してみた世の中には、「Grunt使いはGulp使うべし!」のような記事がたく...2015-05-28nodebrewでnode.jsをインストール最近会社で暇。»プロフィールid:kasankaフロントエンドエンジニア(自称)のやったことの覚書やら子育てに関するあれこれ。月別アーカイブプロフィール@kinako_moをフォローはてなブログをはじめよう!kasankaさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。