Elixirは、Laravelのタスク自動化ツールです。以下の様なタスクを自動で実行できます。
- CSSの拡張言語であるLessやSassをCSSに変換する
- CaffeScriptをJavaScriptに変換する
- 複数のファイルを１ファイルに結合する
- ファイルをミニファイする（余計な空白や改行を削る等してサイズを圧縮する）
- ファイルの変更を監視してタスクを実行する
- CSSやJavaScriptのファイル名にバージョンを付与する
インストール
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
