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

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

[markdown]
“`prettyprinted
% middleman version
Middleman 3.4.0
“`

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

> [Middleman で jQuery と Twitter Bootstrap を使う(gemで) – Qiita](http://qiita.com/mm36/items/59632e6cfad208b52ad2)

## middleman プロジェクトの初期化

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

“`prettyprinted
% mkdir middleman && cd $_
% bundle init
“`

Gemfile に middleman を追加します。

“`ruby:Gemfile
source ‘https://rubygems.org’
gem ‘middleman’, ‘~> 3.4.0’
“`

middleman をインストール。

“`prettyprinted
% bundle install –path vendor/bundle
“`

middleman 用の Gemfile を生成します。

“`prettyprinted
% bundle exec middleman init
“`

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

Gemfile に bootstrap-sass （公式）を追加します。

> [twbs/bootstrap-sass](https://github.com/twbs/bootstrap-sass)

“`ruby: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](https://rails-assets.org/) からインストールします。
シビアなプロジェクトでなければ CDN を読み込めば良しとなるかもしれない。

“`prettyprinted
% bundle install –path vendor/bundle
“`

> * [Middleman: bower を bundler で管理する Rails Assets を使う | deadwood](https://www.d-wood.com/blog/2015/11/06_7669.html)
> * [Grunt, Bower, rails-assets の今後 | deadwood](https://www.d-wood.com/blog/2015/11/20_7695.html)

## 動作確認

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

### CSS(SASS), Font の設定

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

“`css:source/stylesheets/all.css
@charset “utf-8”
@import “bootstrap-sprockets”
@import “bootstrap”
@import “bootstrap-customize”
“`

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

“`prettyprinted
% touch source/stylesheets/bootstrap-customize.css
“`

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

“`html:source/index.html.erb

Bootstrap Button

“`

### JavaScript の設定

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

“`javascript:source/javascripts/all.js
//= require jquery
//= require bootstrap-sprockets
//= require_tree .
“`

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

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

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

## 補遺 Bourbon

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

> [MiddlemanにBourbonを突っ込んで、高速でティザー・LPを作る – Qiita](http://qiita.com/cc-kawanishi/items/6af6130e4528c106991e)

“`ruby:Gemfile
gem ‘bourbon’
gem ‘neat’
gem ‘bitters’
gem “refills”, require: false
“`

“`css:source/stylesheets/all.css
@import ‘bourbon’;
@import ‘neat’;
“`
[/markdown]