[Middleman 3] Middleman: 公式サイトで紹介されている機能を確認する

公開日: 2014/02/25
更新日: 2019/07/28

Developers.IO さんの Middleman 記事が分かりやすかったので、こちらを元によく使いそうな機能を確認してきます。

Contents

主なコマンド

  1. プロジェクトフォルダを作成 … middleman init
  2. 開発用ローカルサーバーを起動 … middleman server
  3. ファイルをビルド（静的ファイルの出力） … middleman build

【Middleman】静的サイトジェネレータを使用してみる。 ｜ Developers.IO

その他。

% middleman --help
Tasks:
middleman build [options]           # Builds the static site for deployment
middleman console [options]         # Start an interactive console in the con...
middleman extension NAME [options]  # Create Middleman extension scaffold NAME
middleman init NAME [options]       # Create new project NAME
middleman server [options]          # Start the preview server
middleman upgrade                   # Upgrade installed bundle
middleman version                   # Show version

ディレクトリ構造

middleman によって、雛形ファイルが生成されます。

テンプレート

ERB が標準のテンプレートエンジン。
レイアウト機能やパーシャル機能も rails と同じように使えます。

こちらの図解が分かりやすいです。

テンプレートエンジンを切り替えることができます。
例えば Haml の場合。

Tilt が有効な gem であれば利用できると言うことのよう。

テンプレートヘルパ

テンプレートヘルパはよくある HTML の作業を簡単にするため, 動的テンプレートの中で使用できるメソッドです。基本的なメソッドのほとんどは Rails のビューヘルパを利用したことのある人にはお馴染みのものです。すべてのヘルパは Padrino フレームワークによって組み込まれています。

Middleman: テンプレートヘルパ

こちらの例が分かりやすい。

  • リンクヘルパ
  • image_tag – タグヘルパ
  • Form ヘルパ
  • ダミーテキストヘルパ
  • ダミー画像ヘルパ

Frontmatter(ページ固有変数)

YAML または JSON フォーマットでテンプレート上部に記述することができるページ固有の変数です。

Middleman: Frontmatter

利用するレイアウトファイルを指定したり、ページの head 情報を持たせたり。

ローカルデータ

YAML または JSON フォーマットで用意した別ファイルのデータを、テンプレートから DB ライクに利用できます。

ファイルサイズ最適化

  • HTMLの圧縮
  • CSS・JavaScriptの圧縮
  • 画像圧縮
  • GZIPで圧縮

LiveReload

その他

その他、こちらで取りあげられていたもの。

  • テンプレート – レイアウトを無効にする
  • 動的ページを作る
  • サイトマップ
  • ディレクトリインデックス
  • アセットパイプライン