,

[Middleman 3] Middleman: Asset Pipeline

公開日: 2014/10/14
更新日: 2018/11/07

なんとなく整理できてきたのでソースをまとめます。

% middleman version
Middleman 3.3.6

Contents

Asset Pipeline

Rails 3.1 から Asset Pipeline という仕組みが追加されました。
Middleman にも同じ機能があり、Sprockets(middleman-sprockets) あたりがその辺りを担っています。

Sprockets

Sprockets は独立しているので、ruby スクリプトから使うこともできるそう。

こういった機能を提供してくれます。

Asset Pipelineを備えたRails 3.1のリリースに向けて、その根幹を担うSprocketsをちょっと触っておくことにした。 – Sooey

  • 複数のサイトやアプリケーションで共通するコードを再利用可能な形で切り出した構成にできる
    • JavaScriptプラグインという単位でCSSや画像もまとめることができる
  • JavaScriptファイルを1つにまとめてブラウザに読ませることによる高速化
    • HTTPリクエストの回数を減らすことができる
  • JavaScriptをコメント付きの複数のファイルおよびディレクトリとして整理できる
    • ソースコードをサイトやアプリケーションのルートディレクトリ外で管理することもできる
    • コメントは最終的に除去されてブラウザに渡されるため、沢山のコメントを書いても問題にならない

Rails でも。

Rails3.1から導入されたAsset Pipelineがよくわかってなかったから調べた – (ﾟ∀ﾟ)o彡 sasata299’s blog

  • cssやjsは各々一つのファイルにまとめられる（ブラウザのリクエスト回数を減らせる）
  • それらのファイルは自動で圧縮／難読化される（ファイルサイズを減らして負荷軽減）
  • ついでに、SassやCoffeeScriptを使ってcssやjsを記述することが可能になっている

concat, minify, uglify プラスαを担っています。
ちなみに .scss, .coffee, .erb などの拡張子に変更するだけでコンパイルしてくれるますが、これは Asset Pipeline の機能がやってくれているからという関係性になります。

CSS と JavaScript はそれぞれどのように指定すべきか

ということで、Middleman（おそらく Rails も）では、こんな形で指定すると理解しています。

  • CSS は SASS の @import で、JavaScript は Sprockets を使うのが基本。
  • Bower 等で用意した外部ライブラリを取り込むときには、CSS も Sprockets を使うと便利。

つかいかた

具体的なつかいかたを確認してみます。

CSS

main.scss を編集します。

  • source/css/main.scss
  • source/css/foo.scss
  • source/css/_bar.scss

SASS を利用しているので、@import が自然か。

@import "foo"
@import "bar"

Sprockets を使う場合は、コメントにこのように書きます。

//= require "foo.scss"
//= require "_bar.scss"

以下のように書くと、sorce/css/ 以下をまとめて読み込んでくれます。

//= require_tree .

どちらも _bar.scss はパーシャルファイルとして扱われるので、middleman build すると以下のファイル配置になります。

  • build/css/main.css
  • build/css/foo.css

main.css は、main, foo, bar がまとまったものとなります。

JavaScritp

main.js を編集します。

  • source/js/main.js
  • source/js/foo.js
  • source/js/_bar.js

上述した CSS の Sprockets 版と同じとなります

外部ライブラリを利用するには

自前で用意したファイルについては、上述の方法で下記のパスの通ったディレクトリに配置すれば問題なく使えます。

  • source/css/
  • source/js/
  • source/img/
  • source/fonts/

では、外部のライブラリを利用するにはどうするのでしょうか。
上記パスにファイルをコピーすれば良いのですが、いまならば Bower で管理する流れが自然でしょう。

というわけで、下記をリライトしました。

補遺