[Middleman 3]初めてのMiddleman：設定について

この記事は書かれてから1年以上経過しており、内容が古い場合があります。

前回の記事初めてのMiddleman：HTML/CSS/JS/画像をビルド時に圧縮するで各種ファイルの圧縮について覚えました。今回、Middlemanの設定について調べていきたいと思います。

何が設定できるのか

どんな設定が行えるか知るには$ middleman server時にアクセスできるhttp://localhost:4567/__middleman/config/を確認します。この専用のconfigページでは基本的な設定項目から拡張機能の設定までチェックすることができます。

ただし、拡張機能の項目はconfigure :build doの中に定義していると$ middleman serverの際に実行されないため設定項目を確認できません。設定項目を確認したいときはビルド指定なしで記述します。

ビルドに関するディレクトリ設定

ソースやビルド先のディレクトリを変更することができます。

set :source, 'source'
set :build_dir, 'build'
set :layout_dir, 'layouts'
set :partials_dir, 'partials'
set :data_dir, 'data'
set :helpers_dir, 'helpers'

アセットに関するディレクトリ指定

アセットヘルパーを使う際に基準となるディレクトリを指定します。

set :css_dir, 'assets/css'
set :js_dir, 'assets/js'
set :fonts_dir, 'assets/fonts'
set :images_dir, 'assets/images'

Compassに関する設定

Sass/Compassに関する設定は今までの設定方法とは若干違います。細かい設定項目は公式ドキュメントのConfiguration Propertiesを参照。

compass_config do |config|
  config.output_style = :compressed
  config.line_comments = false
end

Sassに関する設定

Compassを使わない人はSass Optionsを指定することもできます。Sass Optionの設定項目は公式ドキュメントのOptionsを参考にしてください。

# sass option
configure :development do
  set :sass, {
    :style => :nested
  }
  set :sass_assets_paths, []
end

configure :build do
  set :sass, {
    :style => :compressed
  }
  set :sass_assets_paths, []
end

URLに関わる指定

詳しい挙動までは把握できていないけれど、URLや相対パス、index.htmlだったときにindex.htmlを省くかとかの指定ができるみたい。

set :http_prefix, '/'
set :relative_links, false
set :strip_index_file, true
set :trailing_slash, true

Live Reloadに関する指定

Live Reloadに関してもいくつか設定項目があります。

configure :development do
  activate :livereload do |config|
    config.apply_css_live  = true
    config.apply_js_live   = true
    config.host            = '192.168.1.47'
    config.no_swf          = false
    config.port            = '35729'
  end
end

その他

他にも細かな設定があります。

indexファイルの指定

set :index_file, 'index.html'

エンコーディング

set :encoding, 'utf-8'

コンパイル対象外ファイルの追加

config[:file_watcher_ignore] += [/^\.ruby-version/]

デフォルトレイアウトの指定

set :layout, 'layout'

Markdownのエンジンを指定する

set :markdown_engine, :kramdown

独自の設定項目を追加する

config.rbに独自の設定項目を追加してソース内から参照することもできます。

set :site_name, 'Site Name'
set :site_title, 'Site Title'
set :site_subtitle, 'SIte SubTitle'
set :site_description, 'Site Description'

<h1 id="siteId" class="site-id">
  <span class="site-name"><%= site_name %></span>
</h1>

以上、設定についてでした。

次回：初めてのMiddleman：静的サイトのキャッシュとasset_hash拡張を使ったキャッシュのパージ

シリーズ

Wercker step-s3sync でファイル名に日本語を含んでいる場合に Sync できない問題の解決方法（小ネタ）

2016-10-26
Wercker, Amazon S3, Middleman 3

ウェブデザイナーがはじめるAngularJS：AngularJS向けのディレクティブが用意されたUI Bootstrap

2015-07-06
AngularJS 1, Bootstrap 3, Middleman 3

初めてのMiddleman：Bowerで管理されているフォントファイルをインポートする

2015-05-27
Middleman 3

ウェブデザイナーがはじめるAngularJS：Middlemanでng-annotateを使ったMinify対策

2015-05-19
AngularJS 1, Middleman 3

初めてのMiddleman：Middleman-blogにカテゴリやシリーズなどのカスタムコレクションを追加する方法

2015-04-27
Middleman 3

初めての Middleman シリーズ初めてのMiddleman：設定について