Ruby on RailsやMiddlemanには初めから組み込まれている「Assets Pipeline」。
ファイル読み込みの管理やタグの記述が簡潔で便利なんですよね。
ぼくはわりとRailsで触れる機会が多くて馴染みがあって使いやすかったのですが、
実はJekyllでもGemを追加すると使えるようになると知りました！
すぐにこのブログに導入してみましたが、かなり快適です。
ということで、今回はJekyllに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.ymlのsourcesで指定します。
この設定は上書きではなく、マージになります。
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
この圧縮機能を有効にする場合、sassとuglifier が必要になるので追加でGemをインストールしてください。
gem install sass
gem install uglifier
# もしくはbundlerの場合、Gemfileに追記
gem 'sass'
gem 'uglifier'
強制的に圧縮したい場合は、_config.yml に digest: true を設定しましょう。
assets:
digest: true
Bowerを併用する
BowerでJavaScriptライブラリを管理する場合も_assets/ディレクトリ内にインストールすることで、Assets Pipelineで参照することが出来ます。
まず、プロジェクトルートに.bowerrcを作成して、内容を次のようにします。
{
"directory": "_assets/bower"
}
Bowerがインストールするディレクトリは、デフォルトではbower_componentsですが、_assets/bowerに変更しました。
次に、jekyll-assets内部でBowerのファイルを解釈させるために_config.ymlにsourcesオプションで_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を試してみてください。