Posted at

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

More than 5 years have passed since last update.


依存解決はgemで良いはず・・

ライブラリの追加、いつもみたいに手動ダウンロード、自分でディレクトリ作って置く、なレガシー手順どうにかしたい。。

正しい方法はなんなのか、ruby初心者として模索中・・・

bowerとかもあるみたいだけど、Middleman (Ruby) だから gem でライブラリの読み込みするべきなのでは・・

・・きっとこれで良いはず。うん。

ぼっちプログラマは手探りだな〜;;


Middleman で Bootstrap


まずはgemを持ってくる

Gemfile編集

gem 'bootstrap-sass', :require => false

参考URL : Middleman: アセットパイプライン

↑gemで読み込まれたライブラリをアセットパイプラインに追加する方法が記載されてる。


Stylesheetに組み込まれるようにする

stylesheets/all.css.sass を編集

@charset "utf-8"

@import "bootstrap-sprockets"
@import "bootstrap"
@import "bootstrap-customize"

(bootstrap-customize.css.sassはカスタマイズ用に空ファイルとしてstylesheets以下に作っておいたもの。無くてもOK)

このままだとBootstrapのjavascriptがjQueryがなくて動かないので・・


Middleman で jQuery

Gemfile編集

gem 'jquery-middleman', :require => false


JavaScriptに組み込まれるようにする

javascripts/all.js.coffee を編集

//= require jquery

//= require bootstrap-sprockets
//= require_tree .


動作確認

$ bundle update

$ bundle exec middleman server

今のところこれで自分は満足。こうしたらもっと良いよ〜とかあれば教えてください。。