前回は、middlemanによる静的サイト作成術　その１で、middlemanをインストールして、サーバーを動かすところと、ビルドをするとこまで説明しました。

今回はmiddlemanをさらに便利にするための設定を行います。

Gemfileの修正やmiddlemanの設定

Gemfileというのは、そのプロジェクト上で使うRubyのライブラリを定義するファイルのことです。同じライブラリでもプロジェクトごとにバージョンが異なっている場合などあるので、バージョンの固定化をしたい場合や、最新版をgithubなどから直接取得したい場合などに使います。Gemfile.lockは、ライブラリをインストールする際に参照されるファイルなので、削除しないように。

Gemfileの修正

私はテンプレートエンジンはslim派なので、slimをインストールします。

あと、bootstrapを使うので、middleman-bootstrap-navbarをインストールしました。これは、bootstrapの長ったらしいnavbarの記述をシンプルにするためのライブラリです。rails-bootstrap-navbarもあるので、bootstrap派の人にはオススメです。

そういえば、qiitaの記事を書いたことがあります。

qiita: rails_bootstrap_navbarで楽にnavbarを書こう！

以下、Gemfileです。

# If you have OpenSSL installed, we recommend updating
# the following line to use 'https'
source 'http://rubygems.org'

# For faster file watcher updates on Windows:
gem 'wdm', '~> 0.1.0', platforms: [:mswin, :mingw]

# Windows does not come with time zone data
gem 'tzinfo-data', platforms: [:mswin, :mingw]

# Middleman Gems
gem 'middleman'
gem 'middleman-livereload'

gem 'slim'
gem 'middleman-bootstrap-navbar'

今回はGemでbootstrap-sassをインストールしていません。bowerを使ったからです。gemで済ませたい人は、gemのbootstrap-sassを使ってもよいとは思います。

Gemfileを修正し終えたら、ターミナルで以下のコマンドを入力します。

bundle install

これで、gemがインストールされました。

config.rbの設定

config.rbにはmiddlemanの設定を書いていきます。
middlemanのプラグインを有効化したり、プラグインの設定を変更したり、開発中の際にだけ動く動作を定義したり、ビルドのときだけ動く動作を定義できます。

長いですが、私が使っているconfig.rbをそのまんま貼っておきます。

require 'rake/file_list'
require 'pathname'

config[:file_watcher_ignore] += [ /.idea\// ]

Slim::Engine.disable_option_validator!
set :slim, { tabsize: 2, format: :html, pretty: false }

###
# Page options, layouts, aliases and proxies
###

# Per-page layout changes:
#
# With no layout
page '/*.xml', layout: false
page '/*.json', layout: false
page '/*.txt', layout: false

# With alternative layout
# page "/path/to/file.html", layout: :otherlayout

# Proxy pages (http://middlemanapp.com/basics/dynamic-pages/)
# proxy "/this-page-has-no-template.html", "/template-file.html", locals: {
#  which_fake_page: "Rendering a fake page with a local variable" }

###
# Helpers
###
bower_directory = 'bower_components'

sprockets.append_path File.join root, bower_directory
# sprockets.import_asset 'jquery'


# Build search patterns
patterns = [
    '.png',  '.gif', '.jpg', '.jpeg', '.svg', # Images
    '.eot',  '.otf', '.svc', '.woff', '.ttf', # Fonts
    '.js',                                    # Javascript
].map { |e| File.join(bower_directory, "**", "*#{e}" ) }

# Create file list and exclude unwanted files
Rake::FileList.new(*patterns) do |l|
  l.exclude(/src/)
  l.exclude(/test/)
  l.exclude(/demo/)
  l.exclude { |f| !File.file? f }
end.each do |f|
  # Import relative paths
  sprockets.import_asset(Pathname.new(f).relative_path_from(Pathname.new(bower_directory)))
end


# Reload the browser automatically whenever files change

configure :development do
  set :debug_assets, true
  activate :livereload
end

# Methods defined in the helpers block are available in templates
# helpers do
#   def some_helper
#     "Helping"
#   end
# end


activate :bootstrap_navbar do |bootstrap_navbar|
  bootstrap_navbar.bootstrap_version = '3.3.4'
end

# Build-specific configuration
configure :build do
  # Minify CSS on build
  activate :minify_css

  # Minify Javascript on build
  activate :minify_javascript
end

個別に説明していきます。

.ideaを監視しない

config[:file_watcher_ignore] += [ /.idea\// ]

私はIntelliJ IDEA14.1 Ultimateで開発しています。IntelliJ IDEAはとても強力なIDEであり、Ultimateはその中でもいろんなプログラミング言語をサポートしている素晴らしいIDEです。まぁ有料ですが、お金を払う価値はあります。いろんなプログラミング言語を使う人はIntelliJ IDEA Ultimateがオススメです。IntelliJ IDEAは株式会社サムライズムが代理店を行っているので、そこから購入するとよいでしょう。middlemanだけ使う人は、安価なWebStormでいいかもしれません。私は職場ではRubyMineを使っています。

話が逸れました…。何が言いたかったかというと、.ideaというディレクトリはIntelliJが自動で作るのですが、内容がコロコロと変わるせいで、middlemanのLiveReload機能がその変更を検知してリロードしまくるため、.ideaは無視してね！っていう設定が必要なのです。

他にも無視してほしいファイルがあったら、追記で書いたらいいでしょう。

slimの設定

Slim::Engine.disable_option_validator!
set :slim, { tabsize: 2, format: :html, pretty: false }

最初の記述は、Slimが出す警告を出力しないものです。設定をしているつもりでも警告が出続けたので、無視するようにしました。大勢に影響はありません（たぶん）。
次に、slimの設定を書きます。タブ2つでhtmlを出力し、出力時には整形しないようにしています（余計なスペースなどを削除した状態）。見やすい階層構造を維持して出力したい場合はpretty: trueにしましょう。

bower用の設定

次に、bower用の設定です。bowerはJavaScriptのライブラリを管理するためのツールです。bower自体については次回に書きます。

middlemanはデフォルトでは自身の設定されているimages,javascripts,stylesheets,fontsディレクトリしか自動コンパイルの対象としていません。そのため、bowerでインストールされるライブラリのパスを参照できるようにする必要があります。

###
# Helpers
###
bower_directory = 'bower_components'

sprockets.append_path File.join root, bower_directory
# sprockets.import_asset 'jquery'


# Build search patterns
patterns = [
    '.png',  '.gif', '.jpg', '.jpeg', '.svg', # Images
    '.eot',  '.otf', '.svc', '.woff', '.ttf', # Fonts
    '.js',                                    # Javascript
].map { |e| File.join(bower_directory, "**", "*#{e}" ) }

# Create file list and exclude unwanted files
Rake::FileList.new(*patterns) do |l|
  l.exclude(/src/)
  l.exclude(/test/)
  l.exclude(/demo/)
  l.exclude { |f| !File.file? f }
end.each do |f|
  # Import relative paths
  sprockets.import_asset(Pathname.new(f).relative_path_from(Pathname.new(bower_directory)))
end

bower_componentsディレクトリ以下に含まれるファイルを参照対象に設定しました。ただ、これだとフォントの指定などがうまくいかなくなったので、bower_components以下にあるフォントファイルをfontsディレクトリ内に手動でコピーしたりなどの作業はしました。私の定義の仕方が悪かったのかもしれませんが…。

開発時の設定

configure :development do
  set :debug_assets, true
  activate :livereload
end

次に、開発時の設定です。debug_assetsですが、これを設定しておくと、application.jsで読み込んだファイルを1つ1つバラバラにして読み込んでくれます。なので、JSのデバッグの際に非常にコードが読みやすくなるので、開発中はこちらのほうがいいです。

そして、livereloadを有効化しておきます。修正して保存したらブラウザがリロードしてくれるので反映結果をすぐに確認できます。CSSで見た目を微調整しているときなどは、便利です。シングルページアプリケーションや、複雑なJSを動かしている場合などはオフにしているほうがいいかもしれません。

bootstrap_navbarの設定

activate :bootstrap_navbar do |bootstrap_navbar|
  bootstrap_navbar.bootstrap_version = '3.3.4'
end

これはbootstrap_navbarで使うbootstrapのバージョンの指定です。
ないと怒られるのです…。自分が使うbootstrapのバージョンを入力しましょう。

ビルド時の設定

# Build-specific configuration
configure :build do
  # Minify CSS on build
  activate :minify_css

  # Minify Javascript on build
  activate :minify_javascript
end

最後に、ビルド時の設定です。cssとJavaScriptをminify(最小化)しています。

長々と書きましたが、slimとbowerとbootstrap_navbarとdebug_assetsのところ以外は最初から定義されています。

次回は、bowerについて書きます。