middlemanのasset_hashをscssやjsで使う方法

asset_hashとはキャッシュを回避するために、file名にMD5のハッシュ値を付けるもの。
内容が変わる時のみMD5の結果が変わる。

config.rb

    configure :build do
    ~~~
    activate :asset_hash
    ~~~
    end

assetのpathをscssやjsで展開する

railsのやり方とほぼ同様の模様らしいので、参考URLはrailsのもの。

scssの場合

scssで使う時、

#hoge{
    background-image: image-url("../images/fuga.png");
    background-image: url(image-path("../images/fuga.png") );
}

middleman serverの時

#hoge {
  background-image: url("../images/fuga.png");
  background-image: url("../images/fuga.png"); }

middleman buildすると

#hoge{
  background-image:url("../images/fuga-b76b5a81.png");
  background-image:url("../images/fuga-b76b5a81.png")
}

javascriptの場合

jsファイルで使う場合は、拡張子に.erbをつけてhoge.js.erbのようにする。
railsのページではasset_pathを使っているが、middlemanだとerrorが起きたので、asset_urlを使う。

hoge.js.erb

{src:"<%= asset_url 'logo.png', 'images/' %>"},
{src:"<%= asset_url '[e-mail]', 'images/' %>"},
{src:"<%= asset_url 'mrt.png', 'images/' %>"},

middleman serverの時

{src:"../images/logo.png"},
{src:"../images/[e-mail]"},
{src:"../images/mrt.png"},

middleman buildの時

{src:"../images/logo-bb0b7bcf.png"},
{src:"../images/[e-mail]"},
{src:"../images/mrt-8dc0fac1.png"}

---

asset_hostを設定するとasseteが読み込むhostを設定できる。
クラウドフロント等CDNを使う時に役立ちそう。

config.rb

activate :asset_host
      set :asset_host, "http://assets1.example.com"

<%= javascript_include_tag "app" %>

    <script src="http://assets1.example.com/javascripts/app-5c110269.js" type="text/javascript"></script>