<a href="http://middlemanapp.com/jp/">Middleman</a>はRuby製静的サイトジェネレータ
メタ言語サポートで高速コーディング（できるはず）compassも同梱
ライブリロード（<kbd>Ctrl+R</kbd>とかしなくてよい）



むりやり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も入ってるので

```shell
$ gem install middleman
```

で簡単インストール

```shell
$ middleman init [path to install]
```

して

```shell
$ cd [path to install]
$ middleman server
```

すると<code>0.0.0.0:4567</code>でプレビューできる

```shell
$ middleman build
```

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

## エディタ

* [sublime text 2](http://www.sublimetext.com/2)

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

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

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

<a href="http://aspirecode.com/how-to-add-sass-support-in-sublime-text/">http://aspirecode.com/how-to-add-sass-support-in-sublime-text/</a>

## ターミナル代替

* [iTerm 2](http://iterm2.com/)

なんとなくかっこいい

# config.rb

## Slimのタグ整形の設定

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

## compassの設定

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

<a href="https://github.com/middleman/middleman/issues/53">https://github.com/middleman/middleman/issues/53</a>

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

<pre class="lang:ruby decode:true">ignore [file path]</pre>

# テンプレート

## ファイル拡張子

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

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

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

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

```ruby
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行目の<code>tag</code>メソッド<code>open</code>引数を<code>true</code>にすると取れることはわかったが、今のところ直接ソースをいじるしかない？直接いじるのはいやなので

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

でお茶を濁す

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

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

## ビルド時だけなにかする

```ruby
- if build?
```

## Frontmatterを外部化

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

# その他

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

```shell
$ middleman server -h x.x.x.x
```

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

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

Articles tagged 'SASS'

【脱Dreamweaver】Middleman導入メモ