MiddlemanはRuby製静的サイトジェネレータ
メタ言語サポートで高速コーディング(できるはず)compassも同梱
ライブリロード(Ctrl+Rとかしなくてよい)

むりやりphpでテンプレ書いてたので渡りに船
これを機会にHTML⇒Slim、SCSS⇒SASSにしたい(JS⇒Coffeeは保留)
CUIを使うので難易度は高め

こうしたい:

環境

macにはrubyもgemも入ってるので

1
$ gem install middleman

で簡単インストール

1
$ middleman init [path to install]

して

1
2
$ cd [path to install]
$ middleman server

すると0.0.0.0:4567でプレビューできる

1
$ middleman build

で静的ファイルを書き出し

エディタ

もちろんCodaでもOKだけど、よりシンプルなエディタも使ってみる
Slim、SASS、SCSS、Coffee Script, YAMLなどのシンタックスを入れる

SASSのシンタックスカラーが表示されない

  1. sassファイルを開く
  2. Click View | Syntax | Open all with current extension as … | Sass.

http://aspirecode.com/how-to-add-sass-support-in-sublime-text/

ターミナル代替

なんとなくかっこいい

config.rb

Slimのタグ整形の設定

1
set :slim, { :pretty => true, :sort_attrs => false, :format => :html }

compassの設定

1
2
3
4
compass_config do |config|
  config.output_style = :expanded
  config.line_comments = false
end

https://github.com/middleman/middleman/issues/53

ビルド時に特定のファイルを無視する

ignore [file path]

テンプレート

ファイル拡張子

コンパイルして書き出してくれる

stylesheetlinktagjavascriptincludetagで書き出されるタグからtype属性を削除

呼び出し時に :type => nil を付ける

1
stylesheet_link_tag "com", :type => nil

stylesheetlinktagの末尾のスラッシュを削除

ソースを読んでみると、/gems/middleman-core-3.2.1/lib/vendored-middleman-deps/padrino-helpers-0.11.4/lib/padrino-helpers/tag_helpers.rb 232行目のtagメソッドopen引数をtrueにすると取れることはわかったが、今のところ直接ソースをいじるしかない?直接いじるのはいやなので

1
= (stylesheet_link_tag "com", :type => nil).gsub /\s\/>/, ">" << "\n"

でお茶を濁す

※1/23追記

config.rbでヘルパーを拡張して上記のコードを書かなくて済むようにした

1
2
3
4
5
helpers do
  def slashless_css_link_tag(*source)
    (stylesheet_link_tag(*source)).gsub /\s\/>/, ">"
  end
end

ビルド時だけなにかする

1
- if build?

Frontmatterを外部化

拡張子を.html.slim.frontmatterとして保存
http://www.e2esound.com/wp/2013/07/05/middlemanexternalfrontmatter/

その他

ホストを指定してサーバーを起動する

1
$ middleman server -h x.x.x.x

これでVMやモバイル実機でも確認できる

JSをどうしたらいいか悩み中。
どうにかしてrequire.jsを使うのか、アセットパイプラインを使うのか…