LoginSignup
21
21

More than 5 years have passed since last update.

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

Posted at

依存解決は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

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

21
21
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
21
21