イントロダクション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
メソッド両方の第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, usegulp --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.