Elixir:インストール編

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

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

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中