elixirでbootstrap sassを使う方法

Tag:

Laravel elixirでBootstrapのsassを使う方法を紹介します。単純にBootstrapを使うだけであれば、CDN経由で良いかと思います。sassを修正して、Bootstrapの見た目をカスタマイズしたいのであれば、ここで紹介する方法を試してみてください。

前提知識

まずは、前提知識です。

Node.js

サーバーサイドJavaScriptの実行環境です。「https://nodejs.org/en/」からファイルをダウンロードして実行すればインストールできます。

npm

Node.js用のパッケージ管理ツールです。Node.jsをインストールしたら一緒にインストールされます。

npmの基本的な使い方は以下の通りです。

//ローカルにインストール
npm install <モジュール名>

//グローバルにインストール
npm install -g <モジュール名>

//ローカルモジュールのアンインストール(-gでグローバル)
npm uninstall <モジュール名>

//ローカルにインストールしたモジュールを確認(-gでグローバル)
npm ls
※グローバル
モジュールがマシン全体で共有されます。

※ローカル
モジュールがプロジェクト内のみで利用されます。モジュール自体は、カレントディレクトリのnode_modulesフォルダ内にインストールされます。

Bower

ブラウザ用JavaScriptのパッケージ管理ツールです。node.jsで実装されており、npmでインストールします。

Gulp

Node.jsで動作するタスク自動化のためのツールです。npmでインストールします。グローバルとローカルにインストールが必要です。

Laravel Elixir

Gulpタスクを使いやすくしてくれます。
詳しくは、「http://readouble.com/laravel/5/1/ja/elixir.html」で確認できます。

Bootstrap

Twitter社が開発したCSSフレームワークです。jQueryに依存しています。

bowerを利用してインストールすると、依存しているjQueryと一緒にBootstrapをインストールできます。

手順

1. node.jsとnpmがインストールされているか確認

// node.jsの確認
node -v

laravel_bootstrap0

// npmの確認
npm -v

laravel_bootstrap1

2. グローバルにgulpインストール

npm install -g gulp

3. ローカルにgulpとlaravel-elixirをインストール

Laravelプロジェクト配下に移動します。package.jsonというファイルがあるかと思います。

package.jsonの中身は以下のようになってます。

{
  "private": true,
  "devDependencies": {
    "gulp": "^3.8.8",
    "laravel-elixir": "^1.0.0"
  }
}

「gulp」と「laravel-elixir」のモジュールをインストールするように指定されています。

package.jsonのあるディレクトリで下記コマンドを実行します。

npm install

node_modulesフォルダが作成され、このフォルダ内に「gulp」と「laravel-elixir」のモジュールがインストールされました。

4. Bowerのインストール

下記コマンドを実行します。

npm install -g bower

5. bower.jsonファイルを作成

下記コマンドを実行すると、bower.jsonファイルが生成されます。

bower init

下記のようにいろいろと質問されますが、とりあえず全てそのままでEnterを押します。
laravel_bootstrap4

bowerは、bower.jsonファイルを利用してライブラリの管理を行います。

6. Bootstrapのインストール

http://bower.io/search/」にアクセスしてbootstrapのパッケージを検索してみます。
laravel_bootstrap2

ここでは、sassを利用したいので、以下パッケージをインストールします。
laravel_bootstrap3

下記コマンドを実行します。

bower install bootstrap-sass --save
※--saveオプション
このオプションを付けると「bower.json」のdependencies(依存)に追記してくれます。

下記のようにBootstrapが依存しているjQueryも一緒にインストールしてくれました。
laravel_bootstrap5

ソースはbower_componentsフォルダ配下に格納されています。
laravel_bootstrap6

7. 「resources/assets/sass/app.scss」を編集

「resources/assets/sass/app.scss」に以下内容を記述します。

// 必要に応じて
// @import "BootstrapのSass変数を変更する定義ファイル";

@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap";

// 必要に応じて
// @import "追加したいスタイル定義ファイル(プロジェクト固有のスタイルなど)";
※Bootstrapの変数を変更
「bower_components/bootstrap-sass/assets/stylesheets/bootstrap/_variables.scss」ファイルにBootstrapのSass変数が記述されていますが、各変数定義に「!default」がついていることを確認できるかと思います。「!default」は、「既に定義されている場合は上書きしません」という意味です。なので、Sass変数を変更する定義ファイルは、bootstrapを読み込む前にインポートします。

8. 「gulpfile.js」を編集

「gulpfile.js」に以下内容を記述します。

var elixir = require('laravel-elixir');

elixir(function (mix) {
    mix.sass('app.scss')
            .copy('bower_components/bootstrap-sass/assets/fonts/bootstrap/**', 'public/fonts/bootstrap')
            .scripts([
                "bower_components/jquery/dist/jquery.js",
                "bower_components/bootstrap-sass/assets/javascripts/bootstrap.min.js"
            ], 'public/js/app.js', './'
                    );
});

elixirの「sassメソッド」「copyメソッド」「scriptsメソッド」を利用しています。詳しくは「http://readouble.com/laravel/5/1/ja/elixir.html」を参照願います。

9. gulp実行

gulpを実行します。
laravel_bootstrap7

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

CSSとJavaScriptを圧縮するには、–productionオプションを指定します。

gulp --production

ファイルの変更を監視して自動でタスクを実行させたい場合、watchオプションを利用します。

gulp watch

今回利用したファイルのおさらい

bower_components
├─ bootstrap-sass   bootstrapのjs、sass、fontsを格納
└─ jquery           jqueryのjsを格納

node_modules
├─ gulp             gulpモジュール
└─ laravel-elixir   laravel-elixirモジュール

public
├─ css              bootstrapを含んだCSSファイル生成先
├─ fonts            bootstrap fontsのコピー先
└─ js               jquery,bootstrapのjsファイル生成先

resources
└─ assets
   └─ sass
      └─ app.scss   bootstrapを含んだSassファイルをインポート

bower.json          bowerのライブラり管理で利用
gulpfile.js         gulpの設定ファイル
package.json        npmのライブラリ管理で利用

スポンサーリンク