軽量なマークアップ言語 Jade 入門 からの Gulp でコンパイルまで - Gulp で作る Web フロントエンド開発環境 #5 wakamsha 2015.04.24 190 12187486 これまでずっと Rails での開発をしていたので軽量マークアップ言語に Slim を使っていましたが、Gulp 環境になっても同じような言語でマークアップしたいので Jade を導入してみたいと思います。 サンプルコードはこちらからどうぞ。 wakamsha/try_gulp Jade とは Jade is a high performance template engine heavily influenced by Haml and implemented with JavaScript for node and browsers. For bug reports, feature r
Jade supports two primary methods of iteration, each and while. each Jade’s first-class iteration syntax makes it easier to iterate over arrays and objects within a template: ul each val in [1, 2, 3, 4, 5] li= val <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> You can also get the index as you iterate: ul each val, index in ['zero', 'one', 'two'] li= index + ': ' + val <ul> <li>
手順 コマンドライン（Terminalなど）でダウンロードした解凍ファイルのROOTディレクトリに移動 npm install grunt deployでHTML書き出し、grunt watch:deployでjadeの変更を監視し、HTML自動書き出し可能 ##JSON読み込み 全ページの メタ要素、シェアテキスト サイト共通のリンク などをsrc/json/_common.jsonで一括管理しています。 手順 Gruntfile.js12〜44行目で、jade→HTML書き出しの設定をしています。 dataプロパティにオブジェクトデータを渡すとjade内で使えるようになります。 3.jadeDataFunc関数ではsrc/json/_common.jsonデータに加えてenv(環境)、page(HTMLファイル名)をマージしてからオブジェクトデータを渡しています 4. src/jade
!!! 5 html(lang="en") head title= pageTitle(car insurance montana) :javascript | if (foo) { | bar() | } body h1 Jade - node template engine #container - if (youAreUsingJade) You are amazing - else Get on it! Get on it! Get on it! Get on it! <!DOCTYPE html> <html lang="en"> <head> <title>Jade</title> <script type="text/javascript"> //<![CDATA[ if (foo) { bar() } //]]> </script> </head> <body> <h1>J
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
