[Middleman 3]初めてのMiddleman：アセットパイプラインを使った外部アセットファイルの読み込みと結合

この記事は書かれてから1年以上経過しており、内容が古い場合があります。

はじめに

Middlemanにはアセットパイプラインという外部のCSSやJSを読み込む機能があります。これを使うことで、SCSSの’@import'と同じようにCSSやJSを読み込むことができます。設定いらずで簡単に利用することができます。

使い方

アセットパイプラインはコメントを使って指定します。SassやSCSSの場合@import 'hoge';を使います。

Javascript

Javascriptの場合は1行コメントを使います。

//= require "jquery"

CSS

CSSは1行コメントが使えないので、複数行のコメントを使って指定します。

/*
 *= require common
 */

html {
  background: #eee;
}

パスの指定について

CSS,Javascript共に、config.rbで定義したディレクトリがRootになります。

set :css_dir,      'assets/css'
set :js_dir,       'assets/js'

結合したファイルだけビルドする

アセットパイプラインで読み込む外部ファイルを読み込み専用にすることで、結合したファイルだけをビルドすることができます。読み込み専用にするにはファイル名の先頭にアンダースコア_を指定するだけです。//= require "_jquery"

例えばlibs.jsにライブラリ系のファイルを結合したい場合、このように指定します。

//= require "_jquery.min"
//= require "_jquery.hoge.min"
//= require "_jquery.fuga.min"

Rootディレクトリ外にあるアセットファイルを読み込むには

:js_dirや:css_dirの外にあるライブラリなどを読み込みたい場合、インポートパスをconfig.rbに追加することでアセットパイプラインからアセットファイルを呼び出すことができます。インポートパスは複数追加することもでき、同じ名前のファイルがあった場合、先に指定されたパスからインポートされます。

after_configuration do
  sprockets.append_path 'hoge'
  # sprockets.append_path 'fuga'
  # sprockets.append_path '../fuga'
  # sprockets.append_path 'hoge/css'
end

以上、アセットパイプラインの使い方でした。次回、Bowerとアセットパイプラインを使ったライブラリの読み込み方法を紹介します。

次回：初めてのMiddleman：Bowerを使ってjQueryなどのライブラリをロードする