Elixir：インストール編

Elixirは、Laravelのタスク自動化ツールです。以下の様なタスクを自動で実行できます。

インストール

Elixirは node.js上で動作する gulpというタスク管理ツールをベースとしています。gulpを Laravelで使いやすくするためにラッピングしたツールが Elixirです。その為、node.jsとgulpをインストールした上で、Elixirをインストールする必要があります。

node.jsのバージョンを確認します。node.jsがインストールされていないようなら、node.jsのサイトからダウンロードしてインストールします。

node -v

node.jsのパッケージ管理ツールである npmを使って、node.jsのグローバル環境に gulpをインストールします。

npm install --global gulp

次に、ローカル環境（今いるLaravelのプロジェクトディレクトリ）に、package.jsonに記述されたパッケージをインストールします。
ちなみに、node.jsの npmと package.jsonは、PHPの composerと composer.jsonの関係とほぼ同じです。

package.json

{
  "private": true,
  "devDependencies": {
    "gulp": "^3.8.8",
    "laravel-elixir": "^2.0.0"
  }
}

laravel-elixirとgulpをインストールするよう定義されています。
※gulpはグローバル環境とローカル環境の両方にインストールする必要があります。

npm install

node_moduleディレクトリ以下に gulpと laravel-elixirがインストールされます。

./node_modules
├── gulp
└── laravel-elixir

LessをコンパイルしてCSSに変換してみます。

resources/assets/less/app.less を以下のように編集します。

// resources/assets/less/app.less

@title-color: red;

h1 {
  color: @title-color;
}

gulpfile.jsに、タスクを定義します。
デフォルトで以下の内容になっていると思います。

// gulpfile.js

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

elixir(function(mix) {
    mix.less('app.less');  // ①
});

① の部分が elixirのタスク定義です。
resources/assets/lessにある all.lessをCSSに変換して、public/css/app.cssに出力します。

gulpコマンドを実行すると、public/css/app.css ファイルが生成されます。

gulp

/* public/css/app.css */

h1 {
  color: red;
}

/*# sourceMappingURL=app.css.map */

gulpコマンドに、–production オプションを指定すると、CSSやJavaScriptをミニファイして出力します。

gulp --production

/* public/css/app.css */

h1{color:red}

‘gulp watch’ 実行すると、resources/assets ディレクトリ以下のファイルを監視して、変更されると自動的に gulpタスクを実行します。

gulp watch