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');
});

stylesscriptsメソッド両方の第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を起動すると、ピカードがお茶を要求してくるようになります。

ドキュメント章別ページ

Artisan CLI

ヘッダー項目移動

注目:アイコン:ページ内リンク設置(リンクがないヘッダーへの移動では、リンクがある以前のヘッダーのハッシュをURLへ付加します。

移動

クリックで即時移動します。

バージョン

設定

適用ボタンクリック後に、全項目まとめて適用されます。

カラーテーマ
和文指定 Pagination
和文指定 Scaffold
Largeスクリーン表示幅
インデント
本文フォント
コードフォント
フォント適用確認

フォントの指定フィールドから、フォーカスが外れると、当ブロックの内容に反映されます。EnglishのDisplayもPreviewしてください。

フォント設定時、表示に不具合が出た場合、当サイトのクッキーを削除してください。

バックスラッシュを含むインライン\Code\Blockの例です。

以下はコードブロックの例です。

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class User extends Model
{
    /**
     * ユーザに関連する電話レコードを取得
     */
    public function phone()
    {
        return $this->hasOne('App\Phone');
    }
}

設定を保存する前に、表示が乱れないか必ず確認してください。CSSによるフォントファミリー指定の知識がない場合は、フォントを変更しないほうが良いでしょう。

キーボード・ショートカット

オープン操作

PDC

ページ(章)移動の左オフキャンバスオープン

HA

ヘッダー移動モーダルオープン

MS

移動/設定の右オフキャンバスオープン

ヘッダー移動

T

最初のヘッダーへ移動

E

最後のヘッダーへ移動

NJ

次ヘッダー(H2〜H4)へ移動

BK

前ヘッダー(H2〜H4)へ移動

その他

?

このヘルプページ表示
閉じる