More than 5 years have passed since last update.

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

Posted at 2014-04-01

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")
}

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を使う時に役立ちそう。

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>