Laravel 5.dev Laravel Elixir

イントロダクション

Laravel Elixir（エリクサー：万能薬）は、Laravelアプリケーションのための、基本的なGulpタスクを定義した、きれいでスラスラかけるAPIを提供しています。 Elixirはいくつかの人気のあるCSSとJavascriptプリプロセッサー、それにテストツールもサポートしています。

Gulpやアセットのコンパイルを始めようとして、こんがらがっているようでしたら、Laravel Elixirを気に入ってもらえるでしょう！

インストールと準備

Nodeのインストール

Elixirを始める前、最初にNode.jsをマシーンにインストール済みであることを確認してください。

node -v

Laravel Homesteadは、デフォルトでも必要なものが全部そろっています。しかし、Vagrantを使っていなくても、 Nodeのダウンロードページを読めば、簡単にインストールできます。 心配ありません、簡単で時間もかかりません！

Gulp

次に、GulpをグローバルNPMパッケージとしてインストールします。

npm install --global gulp

Laravel Elixir

まだ残っているステップは、Elixirのインストールだけです。新しくLaravelをインストールすると、ルートディレクトリーにpackage.jsonがあることに気づくでしょう。PHPの代わりにNodeの依存パッケージが定義されている所が異なりますが、このcomposer.jsonファイルと同じようなものだと考えてください。以下のコマンドで、依存パッケージをインストールしてください。

npm install

使用法

これでElixirがインストールできました。すぐに、コンパイルしたり、ファイルを結合したりできますよ！

Lessのコンパイル

elixir(function(mix) {
    mix.less("app.less");
});

上の例では、ElixirはLessファイルが、resources/assets/lessに保存されていると仮定しています。

Sassのコンパイル

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

これは、Sassファイルがresources/assets/sassに保存してあると仮定しています。

CoffeeScriptのコンパイル

elixir(function(mix) {
    mix.coffee();
});

これは、CoffeeScriptファイルがresources/assets/coffeeに保存してあると仮定しています。

全部のLessとCoffeeScriptのコンパイル

elixir(function(mix) {
    mix.less()
       .coffee();
});

PHPUnitテストの起動

elixir(function(mix) {
    mix.phpUnit();
});

PHPSpecテストの起動

elixir(function(mix) {
    mix.phpSpec();
});

Stylesheetsの結合

elixir(function(mix) {
    mix.styles([
        "normalize.css",
        "main.css"
    ]);
});

このメソッドに渡すファイルパスは、resources/cssディレクトリーからの相対パスです。

スタイルシートを結合し、カスタムディレクトリーへ保存

elixir(function(mix) {
    mix.styles([
        "normalize.css",
        "main.css"
    ], 'public/build/css/everything.css');
});

カスタムベースディレクトリーのスタイルシートを結合

elixir(function(mix) {
    mix.styles([
        "normalize.css",
        "main.css"
    ], 'public/build/css/everything.css', 'public/js');
});

stylesとscriptsメソッド両方の第３引数は、メソッドに渡される全相対パスに適用されるベースディレクトリーパスです。

ディレクトリー中の全スタイルシートを結合

elixir(function(mix) {
    mix.stylesIn("public/css");
});

スクリプトの結合

elixir(function(mix) {
    mix.scripts([
        "jquery.js",
        "app.js"
    ]);
});

この場合も、全パスはresources/jsからの相対位置であると仮定されます。

ディレクトリー中の全スクリプトを結合

elixir(function(mix) {
    mix.scriptsIn("public/js/some/directory");
});

複数のスクリプトの組み合わせを結合

elixir(function(mix) {
    mix.scripts(['jquery.js', 'main.js'], 'public/js/main.js')
       .scripts(['forum.js', 'threads.js'], 'public/js/forum.js');
});

バージョン／ハッシュファイル

elixir(function(mix) {
    mix.version("css/all.css");
});

これにより、キャッシュを破棄させるために、一意のハッシュをファイル名に追加します。例えば、all-16d570a7.cssのような名前が生成されます。

ビューの中で、elixir()関数を使用すれば、適切なハッシュ済みのアセット名がロードされます。例をご覧ください。

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

この裏で、elixir()関数は、読み込むべきハッシュ済みファイルの名前を決定します。肩の荷を下ろしたような感じがするでしょう？

新しい場所にファイルをコピー

elixir(function(mix) {
    mix.copy('vendor/foo/bar.css', 'public/css/bar.css');
});

新しい場所にディレクトリ全体をコピー

elixir(function(mix) {
    mix.copy('vendor/package/views', 'resources/views');
});

メソッドのチェーン

もちろん、自分のレシピを作成するため、ほぼ全部のElixirのメソッドを一緒につなげて使用できます。

elixir(function(mix) {
    mix.less("app.less")
       .coffee()
       .phpUnit()
       .version("css/bootstrap.css");
});

Gulp

では、Elixirにどのタスクを実行するのか伝えましょう。コマンドラインから、Gulpを起動する必要があるだけです。

一度に全登録タスクを実行する

gulp

アセットの変更を監視する

gulp watch

テストとPHPクラスの変更を監視する

gulp tdd

注目： 全タスクは開発環境であると仮定していますので、圧縮はされません。実働用にするには、gulp --productionを指定してください。

拡張

自分自身のGulpタスクを生成し、Elixirに付け加えることもできます。端末にメッセージにより言葉で注意を喚起する、 面白いタスクを追加するのを想像してください。次のように行います。

 var gulp = require("gulp");
 var shell = require("gulp-shell");
 var elixir = require("laravel-elixir");

 elixir.extend("message", function(message) {

     gulp.task("say", function() {
         gulp.src("").pipe(shell("say " + message));
     });

     return this.queueTask("say");

 });

ElixirのAPIを拡張(extend)するため、Gulpfileの中で使用するキーと、同時にGulpタスクを作成するコールバック関数を渡しているところに注目です。

監視するカスタムタスクを作成したければ、watcherを登録してください。

this.registerWatcher("message", "**/*.php");

この行は正規表現、**/*.phpに一致するファイルが変更されるとき、messageタスクを起動するように指示しています。

これだけです！これを一番上のGulpfileに書いても良いですし、代わりにカスタムタスクファイルへ切り分けてもかまいません。後者のアプローチを取る場合、Gulpfileの中から読み込むだけです。

require("./custom-tasks")

済みました！これで使えます。

elixir(function(mix) {
    mix.message("紅茶、アールグレー、ホット");
});

この追加により、Gulpを起動すると、ピカードがお茶を要求してくるようになります。