ejsでjsonを読み込みmeta情報を一括管理 - Qiita
編集ファイル gulpfile.js _head.ejs（パーシャル化） meta.json 各個別ページのejsファイル 先ず、gulpfile.jsに設定を記述する。 jsonファイルを読み込むのに必要な「fs（File System）」を記述。元々あるものなのでコマンドプロンプトなどでインストールする必要はない。 タスクの記述内に変数jsonにmeta.jsonを読み込んだJson.parseを代入し、pipeで変数jsonを読み込む。 // gulp core var gulp = require('gulp'); //fsファイルの読み込み var fs = require( 'fs' ); var ejs = require("gulp-ejs"); var rename = require("gulp-rename"); gulp.task('ejs', function()
Gulp + EJS + JSONを使用してhtmlファイルを量産する方法 | ブログ | Glatch（グラッチ） - 夫婦で活動するフリーランスWeb制作ユニット
似たようなhtmlを複数ページ制作するような案件があると思いますが、地道に複製して制作するのは非効率で管理も面倒でミスもしやすいです。 そこで今回はGulpとEJSというテンプレートエンジンを使用してJSONファイルに設定した値を読み込み、複数のhtmlファイルを量産する方法を備忘録を兼ねてご紹介します。 今回使用するもの 今回はGulpを使用してEJSを動かします。Gulpの導入方法などは検索するとたくさん記事が出てきますので、そちらをご確認下さい。 テンプレートエンジンであるEJSと、生成したファイルごとに名前を付与するリネーム用のプラグインを導入します。 gulp-ejs gulp-rename pages.json template.ejs gulp.js 各ファイルの設定 pages.json ユニークな値を格納するJSONファイルは下記の通りです。 { "pages": [ {
テンプレートエンジンEJSで使える便利な構文まとめ - Qiita
※gulp-ejsでのビルドを想定しています。 EJSでできること 数や文字列や配列やオブジェクトの宣言と処理(JavaScriptと同じ) HTMLへの値の展開 ループと条件分岐 外部ファイルの読み込みとパラメータの引き渡し <% %>の種類 <% %> このタグの内側はJavaScriptワールドになる。HTMLとしては出力されない
gulp-ejs でHTMLの編集をカンタンにする – Syngram
|^・ω・)/＜ こんにちは、ひらのです！ 今回はHTML関連のお話です。 webページを作成しているとHTMLファイルがたくさん必要になることもあるかと思います。 そんな時に「EJS」を使うと楽に作業ができるようになるかもしれません。 今回は gulp を利用する想定で話を進めます。 gulpの導入・利用方法は賢人達がたくさんの情報を残してくれているので割愛します。 検索エンジンで「Gulp 使い方」って検索するときっとすぐ見つかります。 EJS とは 本家ページは下記からドウゾ EJS 「Effective JavaScript templating」略して「EJS」です。 「テンプレート」を作って、HTMLを効率よく生成しよう! ってものです。 どんな時に役に立つ? 共通のナビゲーションなどを利用する HTMLファイルが5個以上になる（自分の限界） 共通部分の変更をした際に、全ファイ
GulpでテンプレートエンジンのEJSを使ってみた
EJS – JavaScript Templates 最近、静的なテンプレートを生成する方法としていろいろ試行錯誤していたのですが、JavaScriptで静的なhtmlを生成できるEJSというものを知り、使ってみることにしました。 EJSとはEJS(Embedded JavaScript)は「.ejs」という拡張子のファイル内にあるhtmlにJavaScriptを埋め込む形で使用します。EJSを利用するには「Node.js」が必要になります。EJSにはGulp用のEJSがあり、Gulpで使うことができます。 EJSで何ができるかざっくりとですが、EJSは下記のようなことができます。 ループや条件分岐。共通ファイルの読み込み(インクルード)やパラメータの引き渡し。JavaScriptと同様に、数、文字列、配列、オブジェクトなどを扱える。htmlファイルへの出力。gulp-ejsを導入するEJ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://web-and.me/classification/
