[Middleman 3] Middleman: bootstrap-sass + jquery のプロジェクトを gem で手っ取り早く立ち上げる

middleman v.4.0 のリリースが近づいているようなので、これまで触って得たナレッジをまとめておきたいシリーズ。

% middleman version
Middleman 3.4.0

こちらを参考にさせて頂きました。

Middleman で jQuery と Twitter Bootstrap を使う(gemで) – Qiita

middleman プロジェクトの初期化

middleman を bundler でインストールします。

% mkdir middleman && cd $_
% bundle init

Gemfile に middleman を追加します。

Gemfile
source 'https://rubygems.org'
gem 'middleman', '~> 3.4.0'

middleman をインストール。

% bundle install --path vendor/bundle

middleman 用の Gemfile を生成します。

% bundle exec middleman init

bootstrap-sass, JQuery のインストール

Gemfile に bootstrap-sass (公式)を追加します。

twbs/bootstrap-sass

Gemfile
source 'https://rubygems.org'
gem 'middleman', '~>3.4.0'
gem 'bootstrap-sass', '~> 3.3.5', require: false
source 'https://rails-assets.org' do
  gem 'rails-assets-jquery', '~> 1.11.3'
end

Bootstrap が要求する JQuery は Rails Assets からインストールします。
シビアなプロジェクトでなければ CDN を読み込めば良しとなるかもしれない。

% bundle install --path vendor/bundle

動作確認

設定とサンプルコードを追加し、動作を確認します。

CSS(SASS), Font の設定

CSS に Bootstrap の読込設定を加えます。

source/stylesheets/all.css
@charset "utf-8"
@import "bootstrap-sprockets"
@import "bootstrap"
@import "bootstrap-customize"

Bootstrap のカスタマイズ用 CSS を用意し、最後に読み込みます。

% touch source/stylesheets/bootstrap-customize.css

erb ファイルに下記を加え、アイコンフォントが読み込まれていることを確認します。

source/index.html.erb
<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Bootstrap Button
</button>

JavaScript の設定

JavaScript に JQuery と Bootstrap の読込設定を加えます。

source/javascripts/all.js
//= require jquery
//= require bootstrap-sprockets
//= require_tree .

js ファイルに下記を加え、JQuery が読み込まれていることを確認します。

source/javascripts/all.js
alert( 'You are running jQuery version: ' + $.fn.jquery );

以上で利用可能となります。

補遺 Bourbon

下記でセットアップできるそうなので、いつか試そう。

MiddlemanにBourbonを突っ込んで、高速でティザー・LPを作る – Qiita

Gemfile
gem 'bourbon'
gem 'neat'
gem 'bitters'
gem "refills", require: false
source/stylesheets/all.css
@import 'bourbon';
@import 'neat';