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

① 第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をインストールしました。


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

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中