Middleman その1

導入編

 

◯参考

• Middleman: 効率的な作業を可能にする Ruby 製の静的サイト生成ツール
• [ Middleman で超速プロトタイピング ] #01 Middleman の基礎を一気に学ぶ ｜ Developers.IO
• CSS – 静的サイトの構築に便利:MiddleMan – Qiita
• HamlとSlimをMiddleman上で比較する – Tech-Sketch

 
 

◯導入
（Rubyインストール）

 

• ターミナルで

(sudo) gem install middleman

 

• プロジェクト作成（desktop/testの場合）

cd desktop/test
middleman init .

 

• Middlemanの起動

middleman server

 

• 起動したサーバのURLを確認し、ブラウザでアクセス

The Middleman is standing watch at http://0.0.0.0:4567

 

• 適当にいじる

 

• Middlemanの終了

ターミナルで「Ctrl+C」

 

• 静的ファイルの書き出し（ビルド）

middleman build

 
 

◯その他

• config.rb でいろいろ設定変更 Gruntfile.jsみたいな扱い
• デフォは.erbファイルやけど.hamlでもなんでもおkやで

 
 

◯テンプレ
/source/layouts/layout.haml

- # encoding: utf-8
!!!
%html{:lang => "ja"}
  %head
    %meta{:charset => "UTF-8"}
    %title Hello World
    %link(href="./common/common.css" rel="stylesheet")
    %script(src="./common/jquery-1.11.1.min.js")
    %script(src="./common/common.js")
    /[if lt IE 9]
      %script(src="http://html5shim.googlecode.com/svn/trunk/html5.js")
  %body
    %div.wrapper
      %header
        %h1 Hello World
      %h2 ナビゲーション
      %nav
        %ul
          %li リスト1
          %li リスト2
          %li リスト3
        = yield
      %footer

 

/source/index.html.haml

%section.mainArea
  %p このページはHamlのテスト環境です。
  %p<
    Hamlの記法については
    %a(href="http://fukuyama.co/haml2")<> こちら
    を参考にしました。
  %p#jsText

 
 

◯疑問

• イマイチMiddlemanの立ち位置が不明でGruntと同列なんやろか
• サーバー上でごにょごにょやるのはどうやんでしょ