Elixirを使って、Bootstrap3をセットアップします。
Bowerのインストール
CSSやJavaScriptといったフロントエンド用のパッケージ管理ツールの Bower をインストールします。Bowerはnpmを使ってグローバル環境にインストールします。
npm install -g bower
Bowerを初期化して、bower.jsonファイルを作成します。
質問には全てリターンキーを押して、デフォルト回答します。
bower init
Bowerの詳細は公式サイトをご覧ください。
http://bower.io/
Bootstrapのインストール
Bowerを使ってBootstrapをインストールします。
ここでは、Sass版のBootstrapをインストールします。
bower install bootstrap-sass-official --save
bower_componentsディレクトリに bootstrap-sass-official と jquery がインストールされます。 BootstrapはjQueryに依存している為、jQueryも同時にインストールされます。
bower_components/
├── bootstrap-sass-official
└── jquery
Elixir
resources/assets/sass/app.scss を以下のように編集して、_bootstrap.scssをインポートします。
// Bootstrapの変数を上書きして変更したい場合は、ここで定義する @import "bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap"; // 独自のスタイルの定義はここで定義する
gulpfile.js を以下のように編集します。
var elixir = require('laravel-elixir'); var paths = { 'jquery': 'bower_components/jquery/', 'bootstrap': 'bower_components/bootstrap-sass-official/assets/' }; elixir(function(mix) { mix.sass('app.scss') // app.scssをコンパイルして、public/css/app.css に出力 // Bootstrapのフォントを public/fonts/bootstrapディレクトリにコピー .copy(paths.bootstrap + 'fonts/bootstrap/**', 'public/fonts/bootstrap') // jquery.jsと bootstrap.jsを結合して、public/js/app.jsに出力 .scripts([ paths.jquery + "dist/jquery.js", paths.bootstrap + "javascripts/bootstrap.js" ], 'public/js/app.js', './'); // ① });
① 第1引数には、結合するJavascriptファイル名を配列で指定
第2引数には出力先ファイル名を指定
第3引数には第1引数で指定したJavascriptファイルのディレクトリをプロジェクトルートからの相対パスで指定
gulpコマンドを実行します。
gulp
public ディレクトリに以下のファイルが生成されます。
public
├── css
│ ├── app.css
│ └── app.css.map
├── fonts
│ └── bootstrap
│ ├── glyphicons-halflings-regular.eot
│ ├── glyphicons-halflings-regular.svg
│ ├── glyphicons-halflings-regular.ttf
│ ├── glyphicons-halflings-regular.woff
│ └── glyphicons-halflings-regular.woff2
└── js
├── app.js
└── app.js.map
以上で、Bootstrapのセットアップは完了です。これで、Bootstrapを使ったビューを作成することができます。
Laravel 5.1.3 から npm install すると node_module ディレクトリに bootstrap-sass がインストールされるようになりました。しかし、Bootstrapが依存しているバージョンの jQuery がインストールされません。その為、ここでは依存関係が正しく設定してある Bower を使って、Bootstrapをインストールしました。