タグ

EJSに関するmut00tumのブックマーク (8)

  • ejsやectテンプレートでのfor文メモ - Qiita

    いつも忘れるからメモ Express(Node.js)で利用出来るテンプレートエンジンでectを最近使っていますが,ejsのようにforEach文を書こうとすると失敗したのでメモ

    ejsやectテンプレートでのfor文メモ - Qiita
    mut00tum
    mut00tum 2016/03/15
    for文
  • Gulp+EJS+JSONからHTMLファイルを生成する - kinalog

    似たようなファイルをたくさん作る機会があったんだけど、面倒だし後から更新するのも大変。 そこで、GulpとEJSを使って、JSONファイルの設定を読み込んで、その設定の分だけHTMLファイルを生成する方法はないかと探してみたところ、やっぱりありました。 aircolor.hatenablog.com ただ個人的に、いっぱいタスク作るのってどうなんだろう...と思ったので、1個のタスクにまとめてみることに。 用意するもの gulpは入れてある前提。インストールは割愛。 fs gulp-ejs gulp-rename 下記は新しく作ります。 pages.json(各ページの設定用ファイル) template.ejs(テンプレートEJSファイル) 各ファイルの設定 pages.json それぞれのページの設定を記述。 { "pages": [ { "id": "page1", "title":

    Gulp+EJS+JSONからHTMLファイルを生成する - kinalog
  • EJSテンプレートエンジンを使おう!(1/5):初心者のための Node.jsプログラミング入門 - libro

    前回、HTMLファイルを読み込んで表示させる、ということを行いましたが、思ったより面倒くさいことがわかりました。ファイルを読み込むのに非同期メソッドを使わないといけないし、ちょっとしたデータをHTMLに受渡して表示させるのもいちいちreplaceでコードを置換したりしないといけない。もっと簡単な方法はないのか?と思ったことでしょう。 実は、あります。それは「テンプレートエンジン」を使うのです。Node.jsでは、さまざまなテンプレートエンジンが利用できます。もっとも一般的に用いられているのは「EJS」というものでしょう。 では、EJSをインストールしましょう。Node.jsには「npm」というパッケージ管理プログラムが用意されています。これを使うことで、コマンド一発で必要なライブラリをオンライン経由でダウンロードしインストールできます。 コマンドプロンプトやターミナルを起動し、以下のように

  • Gulp.js+EJS+JSONを使った複数ページの生成方法 - aircolor memolog

    人気のタスクランナーツール「Gulp.js」とテンプレートエンジン「EJS」を下地に、 JSONデータから複数ページを生成できる仕組みを備忘録を兼ねて紹介します。 きっかけ 現在進めている案件で、HTMLを静的かつそこそこ大量に作る事案が発生。 しかし1ページづつ作成・修正するのはとにかくめんどくさいと思われたので、JSONで情報を一括で編集でき、生成も簡単に出来るやり方を確立したかった。 前提・やりたいこと サーバはありものを使用。権限的な問題で新たにパッケージのインストールすることは不可。 PHPが使えないサーバだったため、複製は静的HTMLで行う必要がある。 似たページを1つづつ作成、後で修正をするのはとにかくめんどくさいので、機械的に行いたい。 ページ複製用データは全てJSONファイルにまとめたい。 仕様 書き出しツールとしてGulp.jsを使用。 テンプレートエンジンはEJS。採

    Gulp.js+EJS+JSONを使った複数ページの生成方法 - aircolor memolog
  • 静的サイトジェネレーターを比較してgulp-ejsに辿り着いた - MacとアプリとWebの開発ブログ

    2016 - 02 - 01 静的サイトジェネレーターを比較してgulp-ejsに辿り着いた Web開発 gulp スポンサード リンク 静的サイトジェネレーター(スタティックサイトジェネレーター)をいくつか比較し、実際に使ってみて、最終的に gulp-ejs に辿り着きました。 まず、gulp-ejsに辿り着くまでの話を少しだけ。 その後、gulp-ejsの導入方法を書いていきます。 gulp-ejsに辿り着くまで 最初はsmarty 元々は動的サイトを構築するために、 smarty を利用していました。 データベースとの通信や、テンプレートエンジンとしての機能、強力なキャッシュ機能など、使いやすい部分も多かったです。 しかし、データベースとの通信が不要で簡単なサイトを作るようなケースの場合、メリットよりもデメリット(導入やメンテナンスに掛かる手間)の方が大きくなったので、簡単に使える静

    静的サイトジェネレーターを比較してgulp-ejsに辿り着いた - MacとアプリとWebの開発ブログ
    mut00tum
    mut00tum 2016/03/14
    .pipe(ejs({}, {ext: '.html'}))
  • gulpで手軽にEJSテンプレートをHTMLに変換 - Qiita

    gulpを使ってEJSテンプレートをHTMLに書き出す方法を試してみたので、その導入手順などをまとめてみました。 EJSについて HTMLを生成するテンプレートエンジンのひとつ Node.js環境で動作し、テンプレートタグ中の処理はJavaScriptで記述できる HTMLにテンプレートタグを埋め込む形なので学習コストが低い → PHPみたいな事をJavaScriptでやるイメージ Webサーバ上で動的ページとして出力する使い方を想定しているっぽい けど、ローカル環境で静的ページとしての出力も可能(gulp/Gruntなどと連携すると簡単そう) よく比較に挙げられているJadeの場合はRubyのテンプレートエンジンHamlに影響を受けているらしく、テンプレートタグ以外のHTMLの記述も通常とは異なります(いわゆる短縮文法)。 Jadeの方がコードの記述量は抑えられて便利そうですが、学習コス

    gulpで手軽にEJSテンプレートをHTMLに変換 - Qiita
  • EJS -- Embedded JavaScript templates

    What is EJS? What is the "E" for? "Embedded?" Could be. How about "Effective," "Elegant," or just "Easy"? EJS is a simple templating language that lets you generate HTML markup with plain JavaScript. No religiousness about how to organize things. No reinvention of iteration and control-flow. It's just plain JavaScript. Use plain JavaScript We love JavaScript. It's a totally friendly language. All

  • テンプレートエンジン「EJS」とタスクランナー「Gulp.js」で爆速HTMLコーディング | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    こんにちは! LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 突然ですがみなさん、EJSってご存じですか? EJSっていうのはですね、なんかもう、こう、すんごいツールでして! とにかく、使うとコーディングがめっちゃ早くなるんですよ!! 今回はそれを使って、爆速でコーディングするテクニックの入門編を紹介したいと思います。 EJSとは? EJSはテンプレートエンジンと呼ばれるツールの1つで、JavaScriptのような書き方を取り入れつつHTMLが書けるという特徴を持っています。 ざっっっっくり言い表すと、SassとCSSの関係に近いです。 「EJSデータでより楽な書き方をして、HTMLに変換して出力する」ことができます。 これが使えるようになると、例えばheaderやfooterなどのパーツを分割して共通化させたり、JSのfor文のような命令がHTML上で使えます

    テンプレートエンジン「EJS」とタスクランナー「Gulp.js」で爆速HTMLコーディング | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
  • 1