Posted at

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

More than 5 years have passed since last update.

http://middlemanapp.com/jp/advanced/configuration/

asset_hashとはキャッシュを回避するために、file名にMD5のハッシュ値を付けるもの。

内容が変わる時のみMD5の結果が変わる。


config.rb


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



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

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


scssの場合

http://edgeguides.rubyonrails.org/asset_pipeline.html#css-and-sass


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の場合

http://edgeguides.rubyonrails.org/asset_pipeline.html#javascript-coffeescript-and-erb

jsファイルで使う場合は、拡張子に.erbをつけてhoge.js.erbのようにする。

railsのページではasset_pathを使っているが、middlemanだとerrorが起きたので、asset_urlを使う。


hoge.js.erb

{src:"<%= asset_url 'logo.png', 'images/' %>"},

{src:"<%= asset_url 'map@2x.png', 'images/' %>"},
{src:"<%= asset_url 'mrt.png', 'images/' %>"},


middleman serverの時


{src:"../images/logo.png"},
{src:"../images/map@2x.png"},
{src:"../images/mrt.png"},


middleman buildの時

{src:"../images/logo-bb0b7bcf.png"},

{src:"../images/map@2x-49797249.png"},
{src:"../images/mrt-8dc0fac1.png"}


asset_hostを設定するとasseteが読み込むhostを設定できる。

クラウドフロント等CDNを使う時に役立ちそう。

https://github.com/middleman/middleman/search?q=asset_host&ref=cmdform


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>