Laravel 5.dev Laravel Elixir

イントロダクションIntroduction

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

Gulpやアセットのコンパイルを始めようとして、こんがらがっているようでしたら、Laravel Elixirを気に入ってもらえるでしょう！If you've ever been confused about how to get started with Gulp and asset compliation, you will love Laravel Elixir!

インストールと準備Installation & Setup

NodeのインストールInstalling Node

Elixirを始める前、最初にNode.jsをマシーンにインストール済みであることを確認してください。Before triggering Elixir, you must first ensure that Node.js is installed on your machine.

node -v

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

GulpGulp

次に、GulpをグローバルNPMパッケージとしてインストールします。Next, you'll want to pull in Gulp[http://gulpjs.com] as a global NPM package like so:

npm install --global gulp

Laravel ElixirLaravel Elixir

まだ残っているステップは、Elixirのインストールだけです。新しくLaravelをインストールすると、ルートディレクトリーにpackage.jsonがあることに気づくでしょう。PHPの代わりにNodeの依存パッケージが定義されている所が異なりますが、このcomposer.jsonファイルと同じようなものだと考えてください。以下のコマンドで、依存パッケージをインストールしてください。The only remaining step is to install Elixir! With a new install of Laravel, you'll find a package.json file in the root. Think of this like your composer.json file, except it defines Node dependencies instead of PHP. You may install the dependencies it references by running:

npm install

使用法Usage

これでElixirがインストールできました。すぐに、コンパイルしたり、ファイルを結合したりできますよ！Now that you've installed Elixir, you'll be compiling and concatenating in no time!

LessのコンパイルCompile Less

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

上の例では、ElixirはLessファイルが、resources/assets/lessに保存されていると仮定しています。In the example above, Elixir assumes that your Less files are stored in resources/assets/less.

SassのコンパイルCompile Sass

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

これは、Sassファイルがresources/assets/sassに保存してあると仮定しています。This assumes that your Sass files are stored in resources/assets/sass.

CoffeeScriptのコンパイルCompile CoffeeScript

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

これは、CoffeeScriptファイルがresources/assets/coffeeに保存してあると仮定しています。This assumes that your CoffeeScript files are stored in resources/assets/coffee.

全部のLessとCoffeeScriptのコンパイルCompile All Less and CoffeeScript

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

PHPUnitテストの起動Trigger PHPUnit Tests

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

PHPSpecテストの起動Trigger PHPSpec Tests

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

Stylesheetsの結合Combine Stylesheets

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

このメソッドに渡すファイルパスは、resources/cssディレクトリーからの相対パスです。Paths passed to this method are relative to the resources/css directory.

スタイルシートを結合し、カスタムディレクトリーへ保存Combine Stylesheets and Save to a Custom Directory

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

カスタムベースディレクトリーのスタイルシートを結合Combine Stylesheets From A Custom Base Directory

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

stylesとscriptsメソッド両方の第３引数は、メソッドに渡される全相対パスに適用されるベースディレクトリーパスです。The third argument to both the styles and scripts methods determines the relative directory for all paths passed to the methods.

ディレクトリー中の全スタイルシートを結合Combine All Styles in a Directory

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

スクリプトの結合Combine Scripts

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

この場合も、全パスはresources/jsからの相対位置であると仮定されます。Again, this assumes all paths are relative to the resources/js directory.

ディレクトリー中の全スクリプトを結合Combine All Scripts in a Directory

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

複数のスクリプトの組み合わせを結合Combine Multiple Sets of Scripts

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

バージョン／ハッシュファイルVersion / Hash A File

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

これにより、キャッシュを破棄させるために、一意のハッシュをファイル名に追加します。例えば、all-16d570a7.cssのような名前が生成されます。This will append a unique hash to the filename, allowing for cache-busting. For example, the generated file name will look something like: all-16d570a7.css.

ビューの中で、elixir()関数を使用すれば、適切なハッシュ済みのアセット名がロードされます。例をご覧ください。Within your views, you may use the elixir() function to load the appropriately hashed asset. Here's an example:

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

この裏で、elixir()関数は、読み込むべきハッシュ済みファイルの名前を決定します。肩の荷を下ろしたような感じがするでしょう？Behind the scenes, the elixir() function will determine the name of the hashed file that should be included. Don't you feel the weight lifting off your shoulders already?

新しい場所にファイルをコピーCopy a File to a New Location

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

新しい場所にディレクトリ全体をコピーCopy an Entire Directory to a New Location

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

メソッドのチェーンMethod Chaining

もちろん、自分のレシピを作成するため、ほぼ全部のElixirのメソッドを一緒につなげて使用できます。Of course, you may chain almost all of Elixir's methods together to build your recipe:

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

GulpGulp

では、Elixirにどのタスクを実行するのか伝えましょう。コマンドラインから、Gulpを起動する必要があるだけです。Now that you've told Elixir which tasks to execute, you only need to trigger Gulp from the command line.

一度に全登録タスクを実行するExecute All Registered Tasks Once

gulp

アセットの変更を監視するWatch Assets For Changes

gulp watch

テストとPHPクラスの変更を監視するWatch Tests And PHP Classes for Changes

gulp tdd

注目： 全タスクは開発環境であると仮定していますので、圧縮はされません。実働用にするには、gulp --productionを指定してください。Note: All tasks will assume a development environment, and will exclude minification. For production, use gulp --production.

拡張Extensions

自分自身の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タスクを作成するコールバック関数を渡しているところに注目です。Notice that we extend Elixir's API by passing the key that we will use within our Gulpfile, as well as a callback function that will create the Gulp task.

監視するカスタムタスクを作成したければ、watcherを登録してください。If you want your custom task to be monitored, then register a watcher as well.

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

この行は正規表現、**/*.phpに一致するファイルが変更されるとき、messageタスクを起動するように指示しています。This lines designates that when any file that matches the regex, **/*.php is modified, we want to trigger the message task.

これだけです！これを一番上のGulpfileに書いても良いですし、代わりにカスタムタスクファイルへ切り分けてもかまいません。後者のアプローチを取る場合、Gulpfileの中から読み込むだけです。That's it! You may either place this at the top of your Gulpfile, or instead extract it to a custom tasks file. If you choose the latter approach, simply require it into your Gulpfile, like so:

require("./custom-tasks")

済みました！これで使えます。You're done! Now, you can mix it in.

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

この追加により、Gulpを起動すると、ピカードがお茶を要求してくるようになります。With this addition, each time you trigger Gulp, Picard will request some tea.