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

【告知】 10/14(土)新潟県上越市でIT勉強会を開催します!!

スポンサーリンク

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を試してみてください。

参考サイト


イソップへのお悩み相談募集中

イソップに相談しませんか?

当ブログで紹介しているような、Web制作やフリーランスへの悩みをイソップに相談してみませんか?
回答できることがあれば記事の中でご紹介します。