Laravel Elixirを試してみた

Laravel 5ではGulpが標準採用され、Laravel Elixirというタスクツールが併せて実装されるようです。

http://gulpjs.com/
https://github.com/laravel/elixir

ドキュメントを見てみると
* Sass,Less,CoffeeScript等のコンパイル
* CSS,JavaScriptの結合やminify
* PHPUnit,PHPSpec等の実行
* イベントやルーティングのスキャン(キャッシュ化)
といった、様々なタスクがサポートされています。

そんなLaravel Elixirを、Homesteadで試してみました。尚、Homesteadには最初からGulpがインストールされています。
http://laravel.com/docs/4.2/homestead

* Laravel 5もLaravel Elixirも現在開発中なので、今後もまだまだ変わる可能性はあるでしょう。

1. Homesteadのインストールと起動

http://madroom-project.blogspot.jp/2014/11/laravel-homesteadhomestead.html

2. Laravelプロジェクトの作成とLaravel Elixirに必要なパッケージのインストール

# Homesteadにログイン
$ homestead ssh

# Laravelプロジェクトの作成
# Laravel 5は現在開発中なので"dev-develop"を付けてインストールします
$ composer create-project laravel/laravel elixir-example dev-develop

# Laravel Elixirに必要なパッケージのインストール
$ cd elixir-example/
$ npm install

以下のコマンドは全てHomesteadの中です。

3. sassのコンパイルを試してみる

gulpfile.jsを適当に編集してみます。デフォルトではbowerと絡めてBootstrapを使用するための記述がありますが、今回は使わないので削除しています。

elixir(function(mix) {
    mix.sass('app.scss');
});

上記の'app.scss'は resources/assets/sass/app.scss を指しています。こちらも適当に編集してみます。

body {
  background: #000;
}

gulpコマンドでコンパイルしてみます。

$ gulp
[20:31:25] Using gulpfile ~/Code/elixir-example/gulpfile.js
[20:31:25] Starting 'default'...
[20:31:25] Starting 'sass'...
[20:31:27] Finished 'default' after 1.91 s
[20:31:27] gulp-notify: [Laravel Elixir]
[20:31:27] Finished 'sass' after 1.98 s
[20:31:27] gulp-notify: [Error in notifier] Error in plugin 'gulp-notify'
not found: notify-send

("gulp-notify"云々のエラーはなんだろう)

public/css/app.css としてコンパイルされました。

body {
  background: #000; }

gulp watch コマンドで、ファイル変更の度に自動でコンパイルすることもできます。

$ gulp watch

4. コンパイルするファイルにバージョン名をつける

gulpfile.jsを次のようにしてコンパイルしてみます。

elixir(function(mix) {
    mix.sass('app.scss')
        .version('css/app.css');
});

すると public/build/css/app-d8890e6e.css のように、ハッシュ付きのcssファイルが生成されました。

ビューファイルで以下のように書けば

<link rel="stylesheet" href="{{ elixir("css/app.css") }}">

public/build/rev-manifest.json を参照して

<link rel="stylesheet" href="/build/css/app-d8890e6e.css">

のようにHTMLを出力してくれます。

5. minifyする

$ gulp --production

でminifyしてくれました。

6. PHPUnitを実行する

gulpfile.jsを以下のようにすると、PHPUnitを実行して、テストが失敗すれば処理を停止、テストが成功すれば処理を継続。となりました。

elixir(function(mix) {
    mix.phpUnit()
        .sass('app.scss')
        .version('css/app.css');
}); 

7. 複数ファイルを結合してみる

scssファイルを適当に2ファイル用意してみます。
resources/assets/sass/foo.scss

.foo {
  background: #000;
}

resources/assets/sass/bar.scss

.bar {
  background: #fff;
}

gulpfile.jsを次のようにします。

elixir(function(mix) {
    mix.sass(['**/*.scss'])
        .styles('css/**/*.css')
        .version('css/all.css');
});

コンパイルすると、結合されたファイルが生成されました。
public/build/css/all-993ce219.css

.bar {
  background: #fff; }

.foo {
  background: #000; }

LessやCoffeeScriptのコンパイル、JavaScriptの結合やminify、PHPSpecの実行等も、似たような感じで実行できるはずです。(たぶん。)

以上のように、Laravel 5では、Laravel Elixirを用いて様々なタスクを簡単に実行できるようになるみたいですね。

gulpはタスクが非同期で実行されるが故に、実行順序で少しハマったことがあるのですが、その辺も吸収してくれると助かるなぁと思いました。