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