Jump to the content

jekyll-assetsを使ってJekyllにAssets Pipelineを導入する

Jekyll

    jekyll-assetsを使ってJekyllにAssets Pipelineを導入する

    Ruby on RailsやMiddlemanには初めから組み込まれている「Assets Pipeline」。 ファイル読み込みの管理やタグの記述が簡潔で便利なんですよね。 ぼくはわりとRailsで触れる機会が多くて馴染みがあって使いやすかったのですが、 実はJekyllでもGemを追加すると使えるようになると知りました!

    すぐにこのブログに導入してみましたが、かなり快適です。
    ということで、今回はJekyllにAssets Pipelineを導入する方法を紹介します。

    Jekyll with Assets Pipeline

    Assets Pipeline(アセットパイプライン)とは

    Assets Pipeline(アセットパイプライン)とはJavaScriptやCSSを結合したり圧縮したりする仕組みのことです。 画像ファイルの取り扱いもできます。

    • JavaScriptやCSSを結合することによって、ブラウザでのリクエスト回数を削減します。
    • JavaScriptやCSSを圧縮してファイルサイズを小さくします。
    • SassやCoffeeScript、もしくはERBを使って記述可能。
    • 「/_assets/」のディレクトリにリソースを配置。
    • 「/_assets/YYY」に置いたファイルは、「http://localhost:4000/assets/YYY」でアクセスが可能になります。

    Jekyllでの簡単な例を挙げると、

    {% stylesheet style %}
    {% javascript app %}
    

    上記をHTMLに記述すると次のようにコードが出力されます。

    <link type="text/css" rel="stylesheet" href="/assets/style.css">
    <script type="text/javascript" src="/assets/app.js"></script>
    

    各ファイルは/assets/ディレクトリに格納されているのがわかると思います。

    jekyll-assets

    JekyllにAssets Pipelineを導入するにはjekyll-assetsを導入します。

    今回はこのGemをインストールします。 他にもメンテされていないGemパッケージが存在しましたが、こちらはJekyll v3にも対応していますので、安心して使えます。

    導入方法

    今回もBundlerを使用する前提で説明します。 もちろん gem install でもインストールできます。

    インストール

    始めにGemをインストール。

    gem install jekyll-assets
    
    # もしくはbundlerの場合、Gemfileに追記
    gem 'jekyll-assets'
    

    _config.yml の使用Gemパッケージにjekyll-assetsを追記します。

    gems:
        - jekyll-assets
    

    デフォルトの設定は次のとおりです。

    assets:
      compress:
        css: false | true | default - development: false, production: true
         js: false | true | default - development: false, production: true
      cache: false | directory | default: .asset-cache
      cdn: https://cdn.example.com
      skip_baseurl_with_cdn: false
       skip_prefix_with_cdn: false
      prefix: "/assets"
      assets:
        - "*.png"
        - "bundle.css"
      digest: true
      sources:
        - "_assets/folder"
    

    _config.yml に設定を追加することでデフォルトを上書きすることが出来ます。
    特に必要がなければそのままで大丈夫です。

    リソースファイルを移動

    Jekyllではプロジェクトルートに静的ファイルが配置されていると思いますが、 Assets Pipelineで参照するために、ファイルの場所を変更します。

    /
    ├── css
    ├── js
    ├── img
    

    プロジェクトルートに_assetsディレクトリを新規作成して、 その中にcss, js, imgなどのリソースを移動します。

    /
    └── _assets
        ├── css
        ├── js
        ├── img
    

    デフォルトで使用できるディレクトリ名は次のとおりです。

    • _assets/css
    • _assets/stylesheets
    • _assets/img
    • _assets/images
    • _assets/js
    • _assets/javascripts
    • _assets/fonts

    ディレクトリ名を変えたい場合は_config.ymlsourcesで指定します。 この設定は上書きではなく、マージになります。

    assets:
        sources:
            - _assets/styles
            - _assets/scripts
    

    これでAssets Pipelineから参照できるようになりました。

    ファイル参照する

    jekyll-assetsではLiquidタグを使用して、CSSやJSなどのファイルを出力します。
    記述できるタグは次のとおりです。

    • image, img (imgタグの出力)
    • javascript, js (scriptタグの出力)
    • stylesheet, css, style (linkタグの出力)
    • asset, asset_source (ファイルの内容を出力)
    • asset_path (ファイルのパスを出力)
    {% image arrow.png  %}
    {% javascript app  %}
    {% stylesheet style  %}
    {% asset jquery/dist/jquery.min.js  %}
    {% asset_path style.css  %}
    

    タグの属性の指定方法は次のとおりです。

    • key:value (key="value"形式で属性を指定)
    • argument (キーワード指定で真偽値を指定)
    {% image arrow.png alt:'arrow' %}
    {% javascript app defer async %}
    

    JSをまとめる

    JavaScriptファイルは複数のファイルを1つにまとめることが出来ます。

    例えば次の3つのファイルがあったとして、app.jsにjQueryとHandlebarsを集約したいとします。

    • app.js
    • jquery.min.js
    • handlebars.js

    app.jsの中で次のようにまとめたいファイルを//= requireキーワードと一緒に指定します。

    app.js

    //= require jquery.min
    //= require handlebars
    

    app.jsをLiquidのタグで呼び出すと、、

    {% javascript app  %}
    

    ↓ scriptタグが出力されて

    <script type="text/javascript" src="/assets/app.js"></script>
    

    ↓ 次のように結合されます。

    /*! jQuery v2.2.0 | (c) jQuery Foundation | jquery.org/license */
    !function(a,b){...
    /*!
    
     handlebars v4.0.5
    
    Copyright (C) 2011-2015 by Yehuda Katz
    ...
    

    ファイルをまとめるということはサーバーへのリクエスト数が減らせるので、表示パフォーマンス改善に一役買います。 ガンガン使いましょう。

    環境変数を指定してファイルを圧縮する

    Jekyllのbuildコマンドを実行する際に、JEKYLL_ENV=production jekyll buildと指定するとソースコードが圧縮されます。

    <link type="text/css" rel="stylesheet" href="/assets/style-19683dcd288a04d9909705de9a41c774836de76f100a1f43f2c99b9585e2ad29.css">
    <script type="text/javascript" src="/assets/app-38795019f40e46ae43c136d23a02ea42f5188a86e01e06ec6e8dab766fc03849.js"></script>
    

    ぼくはbundle execで実行するのでこうしてます。

    JEKYLL_ENV=production bundle exec jekyll build
    

    この圧縮機能を有効にする場合、sassuglifier が必要になるので追加でGemをインストールしてください。

    gem install sass
    gem install uglifier
    
    # もしくはbundlerの場合、Gemfileに追記
    gem 'sass'
    gem 'uglifier'
    

    強制的に圧縮したい場合は、_config.ymldigest: true を設定しましょう。

    assets:
      digest: true
    

    Bowerを併用する

    BowerでJavaScriptライブラリを管理する場合も_assets/ディレクトリ内にインストールすることで、Assets Pipelineで参照することが出来ます。

    まず、プロジェクトルートに.bowerrcを作成して、内容を次のようにします。

    {
      "directory": "_assets/bower"
    }
    

    Bowerがインストールするディレクトリは、デフォルトではbower_componentsですが、_assets/bowerに変更しました。

    次に、jekyll-assets内部でBowerのファイルを解釈させるために_config.ymlsourcesオプションで_assets/bowerを追加します。

    assets:
        sources:
            - _assets/bower
    

    これで_assets/bowerを参照できるようになるので、bower install jquery でjQueryをインストールした場合、次のように参照できます。

    //= require jquery/dist/jquery.min
    

    Assets PipelineとBowerが併せて使えるとJavaScriptライブラリの管理がものすごくラクになるので、覚えておいて損はないかと思いますよ。

    その他に

    さらっと紹介しましたが、その他にもSassの中でLiquidが使えたりERBをサポートしていたりCoffeeScriptが使えたりと機能が充実しています。 またautoprefixerやBabelでのES6トランスパイル、ImageMagickなどが使えるアドオンがあるので、拡張可能です。

    • CSS Auto Prefixer - add "autoprefixer-rails" to your Gemfile.
    • ES6 Transpiler (through Babel) - add "sprockets-es6" to your Gemfile.
    • Image Magick - add "mini_magick" to your Gemfile, only works with img, image.
    • Bootstrap - add "bootstrap-sass" to your Gemfile and "@import 'bootstrap'"
    • Font Awesome - add "font-awesome-sass" to your Gemfile.

    これならJekyllをアプリケーション開発にも使えそうですね!
    ぜひ今回紹介したjekyll-assetsを使ってJekyllとAssets Pipelineを試してみてください。

    参考サイト

    注目記事

    最近の記事

    ぼくが書いてます

    フロントエンドエンジニア

    イソップ

    ページの先頭に戻る

    Search results

    ×