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

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

こうしたい：

minifyはせず可読性（pretty）優先（納品後も誰かが変更するかもしれない）
sass、scssの行コメントはつけない
閉じタグがない場合、閉じスラッシュをつけない
styleやscriptのtype属性は省略する
プレビューサーバーのホストを指定したい

環境

OSX 10.8 Mountain Lion
ruby 2.0.0p353
gem 2.0.14

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

$ gem install middleman

で簡単インストール

$ middleman init [path to install]

して

$ cd [path to install]
$ middleman server

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

$ middleman build

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

エディタ

sublime text 2

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

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

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

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

ターミナル代替

iTerm 2

なんとなくかっこいい

config.rb

Slimのタグ整形の設定

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

compassの設定

compass_config do |config|
  config.output_style = :expanded
  config.line_comments = false
end

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

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

ignore [file path]

テンプレート

ファイル拡張子

.html⇒.html.slim
.css⇒.css.sass(.css.scss)
.js⇒.js.coffee

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

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

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

stylesheet_link_tag "com", :type => nil

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

ソースを読んでみると、/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にすると取れることはわかったが、今のところ直接ソースをいじるしかない？直接いじるのはいやなので

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

でお茶を濁す

※1/23追記

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

helpers do
  def slashless_css_link_tag(*source)
    (stylesheet_link_tag(*source)).gsub /\s\/>/, ">"
  end
end

ビルド時だけなにかする

- if build?

Frontmatterを外部化

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

その他

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

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

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

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

【脱Dreamweaver】Middleman導入メモ

環境