slimをmiddlemanで自動リロード

もっとHTMLを簡略化&高速で書きたい、と思っているときに

slimという中間メタ言語があることを知りました。

 

簡単に例を示すと、

このようにslimで書いたものが

| --- title: Welcome to Middleman ---

.welcome

    h1 Middleman is Watching

    = link_to "Read Online Documentation", "http://middlemanapp.com/"

    h2  test

    h3 aiueo

 

コンパイルされて、

    --- title: Welcome to Middleman ---

<div class="welcome">

 <h1>Middleman is Watching</h1>

 <a href="http://middlemanapp.com/">Read Online Documentation</a> <h2> test</h2>

 <h3>aiueo</h3>

</div>

 こんな感じで出力されます。

 

ただ、いちいちコンパイルするのは面倒くさいので、

middlemanという静的サイトジェネレータのlivereloadを使えるよう

セットアップしてみました。

 

というわけで、参考にした記事はこちらです。


■ middlemanをセットアップ

Middleman: はじめに

 

■ middlemanにslimを導入

Middleman + Slim + Herokuでブログをつくりました - ROCHAS

 

 

今は実際に運用でも使えるように、

カスタムテンプレートを作っています。

 

■ カスタムテンプレート

Middleman の自分用テンプレートを簡単に作る方法 | e2esound.com業務日誌


慣れるまでが大変そうですが、慣れればより高速に

コーディングできるような気がしています。


追記(2014/2/19)

カスタムテンプレートを作るときに、注意として書かれていることは

忘れそうなので、ここにメモ。

  • ~/.middleman/sample ディレクトリの中身を ごっそり 取ってくるので, dotfiles も対象になる
  • config.rb も忘れずに作る
  • Gemfile は勝手に作られる (その他にも場合によって勝手に作られるものがある ex. config.ru)
  • $ middleman init PROJECT --images-dir のようなオプションは効かない
  • 中身が空のディレクトリはコピーされない模様