Elixir(エリクサー:万能薬)は、Laravelアプリケーションのための基本的なGulpタスクを定義しており、きれいでスラスラかけるAPIを提供しています。Elixirは人気のあるCSSとJavascriptプリプロセッサー、それにテストツールもサポートしています。メソッドのチェーンを使用し、Elixirでアセットパイプラインを流暢に定義できます。Elixirを気に入ってもらえるでしょう。アプリケーションの開発時に必要だというわけではありません。どんなアセットパイプラインツールを使用してもかまいませんし、使わなくても結構です。インストールと準備NodeのインストールElixirを始める前、最初にNode.jsを開発機にインストール済みであることを確認してください。Homesteadならデフォルトのままでも必要なものが全部そろっています。Vagrantを使っていなくてもNodeのダウンロードページを読めば、簡単にインストールできます。Gulp次にGulpをグローバルNPMパッケージとしてインストールします。Elixir残っているステップはElixirのインストールだけです。新しくLaravelをインストールすると、ルートディレクトリーにpackage.jsonがあることに気づくでしょう。PHPの代わりにNodeの依存パッケージが定義されている所が異なりますが、composer.jsonファイルと同じようなものだと考えてください。以下のコマンドで、依存パッケージをインストールしてください。installコマンドを実行してください。--no-bin-linksElixirの実行ElixirはGulp上に構築されていますので、端末でgulpコマンドを実行するだけでElixirタスクを走らせることができます。コマンドに--productionフラッグを付けることで、ElixirにCSSとJavaScriptファイルを圧縮するように指示できます。watchコマンドを使用できます。このコマンドは端末で動き続けてアセットの変更を監視します。変化が起きると変更があるファイルは自動的にコンパイルされます。watchスタイルシート操作プロジェクトルートにあるgulpfile.jsファイルに全Elixirタスクを構成します。Elixirタスクはアセットをどのようにコンパイルするか実際に定義するためにチェーンでつなげます。LessLessをCSSへコンパイルするにはlessメソッドを使用します。lessメソッドはLessファイルがresources/assets/lessに保存されていることを想定しています。コンパイルされたCSSはデフォルトでpublic/css/app.cssへ保存されます。mix.less(&#39;app.less&#39;);});さらに複数のLessファイルを一つのCSSファイルへ結合できます。この結果のCSSもpublic/css/app.cssに保存されます。]);});コンパイル済みのCSSの出力先をカスタマイズしたい場合は、lessメソッドに第2引数で指定します。&#39;public/stylesheets/style.css&#39;);});SasssassメソッドはSassをCSSへコンパイルします。Sassファイルはresources/assets/sassへ保存されていると想定します。このメソッドは次のように使用します。mix.sass(&#39;app.scss&#39;);});lessメソッドと同様に複数のSassファイルを一つのCSSファイルへまとめることができ、結果のCSSを出力するディレクトリーもカスタマイズできます。&#39;public/assets/css&#39;);});通常のCSS通常のCSSスタイルシートを一つのファイルに結合したい場合は、stylesメソッドを使います。このメソッドに渡すパスはresources/assets/cssからの相対位置で、結果のCSSはpublic/css/all.cssに保存されます。]);});もちろんstylesメソッドの第2引数を指定すれば、結果の出力ファイルをカスタマイズできます。&#39;public/assets/css&#39;);});ソースマップソースマップ生成はデフォルトで有効になっています。各ファイルをコンパイルするごとに、*.css.mapファイルが同じディレクトリーに生成されます。このマッピングはデバッグの時にブラウザ上でコンパイル済みのスタイルシートセレクターからオリジナルのSassやLess定義を見つけるのに役立ちますCSSのためにソースマップを生成したくなければ、設定オプションで無効にしてください。6のコンパイル、CoffeeScriptのコンパイル、Browserify、圧縮、JavaScriptファイルの結合などのJavaScript操作を手助けする多くの機能も提供しています。CoffeeScriptcoffeeメソッドはCoffeeScriptをJavaScriptへコンパイルするために使用します。coffee関数はresources/assets/coffeeディレクトリーからの相対パスの文字列か配列を引数に受け取り、public/jsディレクトリーにapp.jsファイルを生成します。6を使用するためにモジュールをrequireする全ての利点を享受できます。このタスクはスクリプトがresources/assets/jsへ設置されていると考え、結果をpublic/js/main.jsファイルへ書き出します。mix.browserify(&#39;main.js&#39;);});Browserifyは最初からPartialifyとBabelifyトランスフォーマーを含んでいますが、お望みならvueifyをインストールし追加することもできます。6と7をJavaScriptへコンパイルするために使用します。この関数はresources/assets/jsディレクトリーからの相対ファイルパスの配列を引数に受け取り、public/jsディレクトリーのall.jsファイルを生成します。]);});別の場所へ出力したい場合は、希望するパスを第2引数に指定してください。このメソッドの使い方と機能はmix.scripts()と同じで、Babelのコンパイルを行う点のみ異なります。JavaScript複数のJavaScriptファイルを一つのファイルへまとめたい場合は、scriptsメソッドを使用します。scriptsメソッドは全パスをresources/assets/jsからの相対位置であると想定し、結果をデフォルトでpublic/js/all.jsに置きます。]);});複数のスクリプトを別々のファイルにまとめたい場合は、scriptsメソッドを複数回呼び出してください。メソッドの第2引数でそれぞれの結合ファイル名を指定します。&#39;public/js/forum.js&#39;);});指定したディレクトリーの全スクリプトを結合するには、scriptsInメソッドを使います。結果のJavaScriptはpublic/js/all.jsに設置されます。mix.scriptsIn(&#39;public/js/some/directory&#39;);});ファイルとディレクトリーのコピーcopyメソッドはファイルとディレクトリーを新しい場所へコピーするために使用できます。全操作はプロジェクトルートディレクトリーからの相対位置で指定します。多くの開発者がコンパイルしたアセットにタイムスタンプや一意なトークンをサフィックスとして付加し、保存されている古いコードの代わりに真新しいアセットを強制的にロードさせています。Elixirはこれをversionメソッドで処理します。versionメソッドはpublicディレクトリーからの相対パスファイル名を受け取り、ファイル名に一意なハッシュを付けることでキャッシュを破壊します。生成されたファイル名はall-16d570a7.cssのような名前になります。PHPヘルパー関数を使い、ハッシュが付いたアセットをロードすることができます。elixir関数はハッシュをつけたファイル名を自動的に決定します。}}&quot;&gt;複数ファイルのバージョン付けversionメソッドへ配列で複数ファイルを渡すこともできます。&#39;js/app.js&#39;]);});ファイルにバージョンが付けられたら、elixirヘルパー関数でハッシュが付いた実際のファイルへリンクを生成することができます。elixirヘルパー関数にはハッシュをつけていないファイル名を渡す必要があることを覚えておきましょう。}}&quot;&gt;&lt;/script&gt;BrowserSyncBrowserSyncはフロントエンドのリソースに変更が起きたときに、Webブラウザを自動的に再読込します。watchコマンド実行時にBrowserSyncサーバーを起動するようにElixirへ指示するため、browserSyncメソッドが利用できます。watchを実行したら、ブラウザ同期を利用するにはhttp://homestead.app:3000でWebアプリケーションにアクセスしてください。ローカル開発にhomestead.app以外のドメインを使用しているなら、browserSyncメソッドの最初の引数としてオプションの配列を渡してください。});});既存Gulpタスクの呼び出し既存のGulpタスクをElixirから呼び出すにはtaskメソッドを使用します。呼びだされた時にただちょっとしたテキストを話すGulpタスクを考えてみてください。message));});このタスクをElixirから呼び出すにはmix.taskメソッドを使い、メソッドの唯一の引数にタスク名を指定してください。mix.task(&#39;speak&#39;);});カスタムタスク監視カスタムタスクを実行するための監視対象ファイルを登録するには、taskメソッドの第2引数に正規表現で指定してください。&#39;app/**/*.php&#39;);});Elixir拡張の定義Elixirのtaskメソッドが提供しているより、さらに柔軟性が求められる場合は、カスタムElixir拡張を作成してください。Elixir拡張でカスタムタスクへ引数を引き渡せます。以下のような拡張を書いたとしましょう。Gulp限定のロジックはTaskコンストラクターの第2引数として渡している関数に設置しなくてはならない点に注目です。これをGulpfileの先頭に設置するか、代わりにカスタムタスクファイルとして外部ファイルにします。拡張をelixir-extensions.jsファイルに設置し、次のようにメインのGulpfileから読み込みます。watchが実行されている間にカスタムタスクを再起動したい場合は、監視タスクを登録します。kawase(Translation).。