WEBサービス創造記

WEBサービスを作ったり保守したりしてる人のメモブログです。

Laravel Elixirのインストールとセットアップ

      2015/07/29

Laravel Elixirとは

Laravel ElixirはLaravel用のgulpタスクを集めたものです。
gulpとは、Node.jsを使ったビルドツール(RubyのRakeに相当)のことです。

具体的にどういったことをしてくれるかというと、アセットのコンパイルやミニファイ・結合などをしてくれます。

Laravel Elixirを使う準備

Laravel Elixirではgulpを使うので、gulp本体とその動作環境であるNodeJSも必要となります。
さらに、フロントエンドのパッケージ管理ツール(PHPでのComposerに相当)としてbowerも利用するので、これらをインストールしていきましょう。

下記はLinuxのDeb系ディストリビューションでパッケージをインストールする場合なので、RedHat系の方はyum, Macの方はbrewなどに置き換えてください。
パッケージ名もパッケージ管理ツールで異なる場合が有ります。

また、gulpとbowerはここではグローバル(システムワイド)にインストールします。

NodeJSのインストール

$ sudo apt-get install nodejs-legacy

※aptではnodejsという名前のパッケージもありますが、そっちで試すとうまくいきませんでした。下記を参考に上記パッケージでいきました。
run npm command gives error “/usr/bin/env: node: No such file or directory” #3911

npmのインストール

$ sudo apt-get install npm

gulpのインストール

$ sudo npm install --global gulp

bowerのインストール

$ sudo npm install --global bower

Laravel Elixirのインストール

Laravelのプロジェクトルートにpackage.jsonというファイルがあると思います。これはNode.JSのモジュールを管理するツールであるnpmで使います。
このファイルにcomposer.jsonに似た書式でlaravel-elixirというパッケージが記載されていると思います。これを下記コマンドでインストールします。

$ cd /path/to/project
$ npm install

Laravel Elixirの使い方

Laravel Elixirでのビルドタスクはgulpfile.jsで定義します。
デフォルトでは下記のタスクが書かれていると思います。

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

/*
 |--------------------------------------------------------------------------
 | Elixir Asset Management
 |--------------------------------------------------------------------------
 |
 | Elixir provides a clean, fluent API for defining some basic Gulp tasks
 | for your Laravel application. By default, we are compiling the Less
 | file for our application, as well as publishing vendor resources.
 |
 */

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

これはLESSをCSSへコンパイルするためのタスクです。

Laravel5 でのディレクトリ構成では、アセットはresources/に配置することになっています。
ここを見ると、デフォルトで”resources/assets/less/app.less”というファイルがあります。

gulpfile.jsで定義されているタスクはgulpコマンドで実行されます。

$ gulp
[17:53:56] Using gulpfile ~/work/hoge/gulpfile.js
[17:53:56] Starting 'default'...
[17:53:56] Starting 'less'...
[17:53:56] Running Less: resources/assets/less/app.less
[17:53:56] Finished 'default' after 698 ms
[17:53:58] gulp-notify: [Laravel Elixir] Less Compiled!
[17:53:58] Finished 'less' after 2.71 s

Lessがコンパイルされ、public/css/へ配置されました。

また、いちいち`gulp`コマンドを実行するのが面倒な場合は`gulp watch`しましょう。
こうしておけばファイルが編集されるたびにコンパイルタスクが実行されて便利です。

ElixirはデフォルトでSASSのコンパイルにも対応しています。また、別種のアセットのコンパイル(CoffeeScriptなど)ももちろん可能です。
タスクの実装方法などの詳細は公式ドキュメントを参照してください。

Laravel Elixir – Laravel – The PHP Framework For Web Artisans

 - Laravel , , , , , ,