[Middleman 3] Middleman: bootstrap-sass + jquery のプロジェクトを gem で手っ取り早く立ち上げる
middleman v.4.0 のリリースが近づいているようなので、これまで触って得たナレッジをまとめておきたいシリーズ。
% middleman version
Middleman 3.4.0
こちらを参考にさせて頂きました。
Contents
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 （公式）を追加します。
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
下記でセットアップできるそうなので、いつか試そう。
Gemfile
gem 'bourbon'
gem 'neat'
gem 'bitters'
gem "refills", require: false
source/stylesheets/all.css
@import 'bourbon';
@import 'neat';