phoenixのテンプレートエンジンをデフォルトのeexからslimにする

phoenixのデフォルトのテンプレートエンジンは `eex` というRoRの`erb`風味のシンタックスですが、個人的にslimの方が好きなので、phoenix frameworkでもslimを利用しましょう、という話。

> 
 **[変更履歴]**
 2016/01/08
 リポジトリ名がphoenix-slimから **phoenix_slime**に改名されていたため修正
 2016/03/29
 generatorについて記述追加
 


## phoenix_slimeのインストール

`mix.exs` に`phoenix_slime`を追加する。

```mix.exs
  # Type `mix help deps` for examples and options.
  defp deps do
    [{:phoenix, "~> 1.1.4"},
     {:postgrex, ">= 0.0.0"},
     {:phoenix_ecto, "~> 2.0"},
     {:phoenix_html, "~> 2.4"},
     {:phoenix_live_reload, "~> 1.0", only: :dev},
     {:gettext, "~> 0.9"},
     {:phoenix_slime, "~> 0.5.1"}, #追加
     {:cowboy, "~> 1.0"}]
  end
```

`mix.exs`に追加が終わったら `deps.get` コマンドを実行する。

```
$ mix deps.get
```

## config.exsにテンプレートエンジンの記述を追加

`config/config.exs` に以下を追加する

```config.exs
config :phoenix, :template_engines,
  slim: PhoenixSlime.Engine,
  slime: PhoenixSlime.Engine
```

## slimをライブリロードに対応させる

```dev.exs
config :phoenix_slim_example, PhoenixSlimExample.Endpoint,
  live_reload: [
    patterns: [
      ~r{priv/static/.*(js|css|png|jpeg|jpg|gif|svg)$},
      ~r{web/views/.*(ex)$},
      ~r{web/templates/.*(eex|slim|slime)$}
    ]
  ]
```
`web/templates`のファイル拡張子に`slim|slime`を追加。


## 拡張子

 * ◯◯.html.slim
 * ◯◯.html.slime

どちらも利用可能。  
エディタのシンタックスやlinterの都合もあって基本はslimにしてます。（slimeによる利点てあるのかな・・・）

## slimテンプレートを利用してみる


```hello.html.eex
<div class="jumbotron">
    <h2> hello, phoenix </h2>
</div>
```

slimで書くとこうなる

```hello.html.slim
.jumbotron
    h2 hello, phoenix
```

いろいろ実験していて気づいたこと。

 1. eexとslimが混在していてもうまく動作してくれる、例えばlayoutsがeexでその下の子コンポーネントがslimでも動作に全く問題はない。
 2. eexとslimが同一ディレクトリに同名である場合はeexが優先される。 `hello.html.eex`と`hello.html.slim`が同一ディレクトリ内にある場合は、eexが優先されるようだ。slim側を読ませたければeexのファイルを削除するなりする。

## Generator

v0.5からslim記法でのscaffoldも追加されたようです。

コマンドの引数は`$ mix phoenix.gen.html`と一緒、詳しくは[コチラ](http://www.phoenixframework.org/v0.13.1/docs/mix-tasks#section--mix-phoenix-gen-html-)。

```
mix phoenix.gen.html.slime Comment comments content:string user_id:integer article_id:integer

* creating web/controllers/comment_controller.ex
* creating web/views/comment_view.ex
* creating test/controllers/comment_controller_test.exs
* creating web/templates/comment/edit.html.slim
* creating web/templates/comment/form.html.slim
* creating web/templates/comment/index.html.slim
* creating web/templates/comment/new.html.slim
* creating web/templates/comment/show.html.slim
* creating priv/repo/migrations/20160328153716_create_comment.exs
* creating web/models/comment.ex
* creating test/models/comment_test.exs

Add the resource to your browser scope in web/router.ex:

    resources "/comments", CommentController

Remember to update your repository by running migrations:

    $ mix ecto.migrate

```

## ルートページをslimで書き直す

pages/index.html.slim

```index.html.slim
.jumbotron
  h2 Welcome to Phoenix!
  p.lead
    | A productive web framework that

    | does not compromise speed and maintainability.
.row.marketing
  .col-lg-6
    h4 Resources
    ul
      li
        a href="http://phoenixframework.org/docs/overview"  Guides
      li
        a href="http://hexdocs.pm/phoenix"  Docs
      li
        a href="https://github.com/phoenixframework/phoenix"  Source
  .col-lg-6
    h4 Help
    ul
      li
        a href="http://groups.google.com/group/phoenix-talk"  Mailing list
      li
        a href="http://webchat.freenode.net/?channels=elixir-lang"  #elixir-lang on freenode IRC
      li
        a href="https://twitter.com/elixirphoenix"  @elixirphoenix
```