Readouble

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

stylesscriptsメソッド両方の第3引数は、メソッドに渡される全相対パスに適用されるベースディレクトリーパスです。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.

章選択

Artisan CLI

設定

明暗テーマ
light_mode
dark_mode
brightness_auto システム設定に合わせる
テーマ選択
photo_size_select_actual デフォルト
photo_size_select_actual モノクローム(白黒)
photo_size_select_actual Solarized風
photo_size_select_actual GitHub風(青ベース)
photo_size_select_actual Viva(黄緑ベース)
photo_size_select_actual Happy(紫ベース)
photo_size_select_actual Mint(緑ベース)
コードハイライトテーマ選択

明暗テーマごとに、コードハイライトのテーマを指定できます。

テーマ配色確認
スクリーン表示幅
640px
80%
90%
100%

768px以上の幅があるときのドキュメント部分表示幅です。

インデント
無し
1rem
2rem
3rem
原文確認
原文を全行表示
原文を一行ずつ表示
使用しない

※ 段落末のEボタンへカーソルオンで原文をPopupします。

Diff表示形式
色分けのみで区別
行頭の±で区別
削除線と追記で区別

※ [tl!…]形式の挿入削除行の表示形式です。

テストコード表示
両コード表示
Pestのみ表示
PHPUnitのみ表示
OS表示
全OS表示
macOSのみ表示
windowsのみ表示
linuxのみ表示
和文変換

対象文字列と置換文字列を半角スペースで区切ってください。(最大5組各10文字まで)

本文フォント

総称名以外はCSSと同様に、"〜"でエスケープしてください。

コードフォント

総称名以外はCSSと同様に、"〜"でエスケープしてください。

保存内容リセット

localStrageに保存してある設定項目をすべて削除し、デフォルト状態へ戻します。

ヘッダー項目移動

キーボード操作