イントロダクション
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
メソッド両方の第3引数は、メソッドに渡される全相対パスに適用されるベースディレクトリーパスです。
ディレクトリー中の全スタイルシートを結合
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を起動すると、ピカードがお茶を要求してくるようになります。