Elixir：JavaScript編

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()の第２引数を指定することで、app.jsの出力先ディレクトリを変更できます。

// gulpfile.js

var elixir = require('laravel-elixir');

elixir(function(mix) {
    mix.coffee([
        'hello.coffee',
        'hoge.coffee'
    ], 'public/assets/js');
});

---

JavaScript

複数のJavaScriptファイルを１つに結合することができます。

// 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()の第２引数を指定することで、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

---

その他のElixir関連記事はこちら