blog

初めての Middleman シリーズ初めてのMiddleman:アセットパイプラインを使った外部アセットファイルの読み込みと結合

    • Ryuichi Nonaka
    この記事は書かれてから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などのライブラリをロードする

    シリーズ

    1. 初めてのMiddleman:rbenv, bundler 環境でMiddlemanを使ったHello World
    2. 初めてのMiddleman:レイアウト機能でレイアウトとコンテンツを分離する
    3. 初めてのMiddleman:パーシャルを使ったコンテンツのモジュール化
    4. 初めてのMiddleman:SCSSのコンパイルとテンプレートの基礎
    5. 初めてのMiddleman:Sass MixinライブラリのBourbon, Neatを導入してみる
    6. 初めてのMiddleman:データファイルとデータファイルを使った動的ページ生成
    7. 初めてのMiddleman:サイトにブログ機能を追加する
    8. 初めてのMiddleman:Amazon S3にビルドされたファイルを同期する
    9. 初めてのMiddleman:HTML/CSS/JS/画像をビルド時に圧縮する
    10. 初めてのMiddleman:設定について
    11. 初めてのMiddleman:静的サイトのキャッシュとasset_hash拡張を使ったキャッシュのパージ
    12. 初めてのMiddleman:Middleman::S3Syncで使うAWS IAMユーザーのアクセスキー管理方法について
    13. 初めてのMiddleman:Helperを使ってGravatarのアイコンを表示する
    14. 初めてのMiddleman:アセットパイプラインを使った外部アセットファイルの読み込みと結合
    15. 初めてのMiddleman:Bowerを使ってjQueryなどのライブラリをロードする
    16. 初めてのMiddleman:スケルトンを自作する方法
    17. 初めてのMiddleman:Middleman Blogの記事データを使いやすく管理する方法
    18. 初めてのMiddleman:Middleman-blogのシングルブログを前提としたSkeletonを作った
    19. 初めてのMiddleman:Middleman-blogでマルチブログを試してSkeletonを作った
    20. 初めてのMiddleman:Markdown EngineをkramdownからRedcarpetに切り替える
    21. 初めてのMiddleman:RedcarpetとMiddleman::Rougeを使ったシンタックスハイライト
    22. 初めてのMiddleman:Middleman-Syntaxを使ったシンタックスハイライト
    23. 初めてのMiddleman:Middleman-Blogで記事毎に画像を管理する方法
    24. 初めてのMiddleman:Gulpを使ってサムネイル画像を生成する
    25. 初めてのMiddleman:Middleman-OGPのOGP画像指定を相対パスで設定する
    26. 初めてのMiddleman:Middleman-OGPでMiddleman-BLogにOGPを設定する
    27. 初めてのMiddleman:Middleman-Titleでタイトルタグを手軽に設定する
    28. 初めてのMiddleman:多言語化 - 言語ファイルの作成とヘルパーの埋め込み
    29. 初めてのMiddleman:Middleman-blogにカテゴリやシリーズなどのカスタムコレクションを追加する方法
    30. 初めてのMiddleman:Bowerで管理されているフォントファイルをインポートする

    コメント・フィードバック