Elixirを使って、CaffeeScriptをJavaScriptへ変換してみます。また、複数のJavaScriptファイルの結合も試します。
CoffeeScript
resources/assets/coffee ディレクトリ以下に、coffeeファイルを作成します。
// resources/assets/coffee/hello.coffee alert "Hello CoffeeScript!"
gulpfile.jsに、タスクを定義します。
// gulpfile.js var elixir = require('laravel-elixir'); elixir(function(mix) { mix.coffee('hello.coffee'); // ① });
① の部分にタスクを定義します。
mix.coffee()は、引数で指定されたcoffeeファイルをJavaScriptに変換し、public/js/app.jsに出力します。引数で指定されたcoffeeファイルは、resources/assets/coffeeにある物とみなします。
gulpコマンドを実行すると、public/css/app.js ファイルが生成されます。
gulp
app.jsと一緒に、app.js.mapというファイルも生成されます。このファイルは、ブラウザが app.jsと変換前の coffeeファイルのマッピングを可能にするファイルです。ブラウザの開発ツールを使って、JavaScriptのデバッグを行う時に非常に役に立ちます。
変換する coffeeファイルが複数ある場合は、mix.coffee()に配列を渡します。
また、mix.coffee()の第2引数を指定することで、app.jsの出力先ディレクトリを変更できます。
// gulpfile.js var elixir = require('laravel-elixir'); elixir(function(mix) { mix.coffee([ 'hello.coffee', 'hoge.coffee' ], 'public/assets/js'); });
JavaScript
複数のJavaScriptファイルを1つに結合することができます。
// gulpfile.js var elixir = require('laravel-elixir'); elixir(function(mix) { mix.scripts([ // ① 'jquery.js', 'app.js' ]); });
① の部分にタスクを定義します。
mix.scripts()は、引数で指定された jsファイルを結合して、public/js/all.jsに出力します。引数で指定された jsファイルは、resources/assets/js にある物とみなします。
gulpコマンドを実行すると、public/css/all.js ファイルが生成されます。
gulp
また、mix.scripts()の第2引数を指定することで、all.jsの出力先ディレクトリを変更できます。
// gulpfile.js var elixir = require('laravel-elixir'); elixir(function(mix) { mix.styles([ 'jquery.js', 'app.js' ], 'public/assets/js'); });
CoffeeScriptをJavaScriptに変換した時は、app.js というファイル名で出力されましたが、JavaScriptファイルの結合の時は、all.js で出力されます。微妙に違うので注意してください。
その他
ここに掲載した機能以外で以下の機能もあります。詳細は公式サイトのドキュメントをチェックしてくださいい。
- Browserify:require moduleしているJavaScriptをプレーンなJavaScriptにコンパイル
- Babel: EcmaScript 6, 7 を EcmaScript 5にコンパイル
http://laravel.com/docs/5.1/elixir