Elixir：Bootstrap編

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', './');  // ①
});

① 第１引数には、結合するJavascriptファイル名を配列で指定
第２引数には出力先ファイル名を指定
第３引数には第１引数で指定した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をインストールしました。

---

その他のElixir関連記事はこちら

広告