lumen 5.1にlaravel-elixirを導入する

Page : ( 2 / 2 )


タスクランナーに必要なファイルを作成

プロジェクト直下にgulpfile.jsという名でタスクを走らせる為に必要なファイルを作ります。

// gulpfile.js

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

elixir(function(mix) {
   // 走らせたいタスクはここに記述していく
});

以上で導入は完了です。


動作確認

導入が完了したので、続いては正しく動くか検証してみます。

プロジェクト直下のresourcesフォルダに、
assets、coffeeというフォルダを作ってhello.coffeeというファイルを作りました。

# resources/coffee/hello.coffee

console log 'hello laravel-elixir'

 

続いてタスクを走らせる為に、gulpfile.jsにcoffeeファイルをコンパイルする処理を書きます。

// gulpfile.js

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

// 発光先
// var publishFolder = 'public/js/'

elixir(function (mix) {
    // hello.coffeeファイルのコンパイル
    mix.coffee('hello.coffee')
    // ##複数のファイルを一つのファイルにまとめたい場合の処理
    // * public/js/app.jsというファイル名で発行する設定
    // .coffee([
    //   'file1.coffee',
    //   'file2.coffee',
    //   'file3.coffee'
    // ], publishFolder + 'app.js')

});

続いてコマンドライン上で以下のコマンドを実行するとタスクが自動的に走ります。

gulp


デスクトップで開発されていれば、”CoffeeScript Compiled!”とポップアップが現れ、
public/jsフォルダにhello.jshello.js.mapのファイルが作成されていればコンパイルの成功です。

デフォルトの設定ではresourcesフォルダの直下参照しますが、
laravel-elxirのcofigを直接変更せず、設定を変更することも可能です。

その場合は以下の様に設定します。

// gulpfile.js

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

// app/resourcesから app/assetsフォルダに設定を変更
elixir.config.assetsPath = './app/assets';

elixir(function (mix) {
  // do something

});

今回はLumenフレームワークを元に導入しましたが、
設定を変更すれば、他のフレームワークでも導入が可能だと思います。

laravel-elixir専用のプラグインも公開されているので、
機会があれば、Laravel以外でも導入してみてください。

laravel-elixirのプラグイン

 

この記事のカテゴリ
プログラミング

この記事に付けられているタグ