localdisk

PHP とか Java とか Web とか好きなことを書きます。

他のフレームワークでも使える Laravel-Elixir

今日の記事は www.adventar.org のフライングです。12/2 分になります。

rails-assets サポート終了?

先日 Rails 界隈このような話題がTLを賑やかせていました。 github.com

僕自身はPHPerなので横目で見ていたのですが「Laravel-Elixir便利なので、他のフレームワーク使いの人にもおすすめしたいなぁ」と思いたち、来月の Advent Calendar をフライングしている次第。

Laravel-Elixir とは

gulp のタスク群を使いやすくまとめたものと思ってくださって結構です。Laravel という PHP フレームワークの1ツールとして作られているので初期設定はLaravelに最適化されていますが、変更可能(後述)なのでRailsや他のフレームワークにも適用できると思います。

Laravel-Elixir で何ができるのか?

いわゆる asset 管理と言われるものはたいていできます。

欲しいものは大体揃ってるんじゃないかなと思います。あとはテスト支援としてテストファイルを監視して

の実行が可能です。

Laravel-Elixir のインストール

インストールする前に Node.js と Gulp のインストールを済ませておいてください。PHP は必要ないです。

僕は以下の環境で動かしています

$ node -v
v5.1.0
$ npm -v
3.3.12

多分 node のバージョンは ver.4 でも動くと思います。

以下のような package.json を用意してください。

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

で、

$ npm install

ちょっと時間がかかる(5分程度)ので作業の合間にやっておくのがおすすめです。

ディレクトリ構成

ディレクトリ構成はこんな感じ。ディレクトリはだいたい変更可能。

project
 ├── gulpfile.js   // Laravel-Elixir でやりたいことを書く
 ├── node_modules  // いろいろはいってる
 ├── package.json   
 ├── public
 │   ├── build  // バージョン指定した場合の出力先
 │        ├── css
 │        └── js
 │   ├── css   // CSS の出力先
 │   └── js    // JavaScript の出力先
 ├── resources
     └── assets
         ├── coffee  // CoffeeScript 書くところ
         ├── css     // CSS 書くところ
         └── js      // Javascript 書くところ
         ├── less    // LESS 書くところ
         ├── sass    // Sass 書くところ

使ってみる

では、使ってみましょう。まず resources/assets/sassapp.scss というファイルを作って CSS を書きます。それから gulpfile.js

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

elixir(function(mix) {
    mix.sass('app.scss');
});

と書いて gulp コマンドを打つと…

➜  laravel-elixir  gulp
[20:24:46] Using gulpfile ~/Projects/laravel-elixir/gulpfile.js
[20:24:46] Starting 'default'...
[20:24:46] Starting 'sass'...

Fetching Sass Source Files...
   - resources/assets/sass/app.scss


Saving To...
   - public/css/app.css

[20:24:46] Finished 'default' after 344 ms
[20:24:47] gulp-notify: [Laravel Elixir] Sass Compiled!
[20:24:47] Finished 'sass' after 474 ms

簡単ですね。ちなみに gulp watch しておくと、ファイル監視してくれるので保存されるタイミングでコンパイルが走ります。便利。Minify したい場合は gulp --production とすれば Minify されます。デプロイする際はこのオプションを付けておきたいですね。

バージョン(フィンガープリンティング)

あとはバージョンについて触れてみます。先ほどの gulpfile.js を以下のように編集してみましょう。

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

elixir(function(mix) {
    mix.sass('app.scss')
       .version('css/app.css'); // ここを追加
});

すると…

➜ laravel-elixir  gulp
[20:35:20] Using gulpfile ~/NetBeansProjects/laravel-elixir/gulpfile.js
[20:35:20] Starting 'default'...
[20:35:20] Starting 'sass'...

Fetching Sass Source Files...
   - resources/assets/sass/app.scss


Saving To...
   - public/css/app.css

[20:35:20] Finished 'default' after 340 ms
[20:35:20] gulp-notify: [Laravel Elixir] Sass Compiled!
[20:35:20] Finished 'sass' after 474 ms
[20:35:20] Starting 'version'...

Fetching Version Source Files...
   - public/css/app.css


Saving To...
   - public/build

[20:35:20] Finished 'version' after 52 ms

version というタスクが実行されました。この結果 public/build/cssapp-6ac487d735.css というファイルが出力されます。app- から先の乱数の部分は実行するたびに変化します。で、ここからが肝ですが version タスク実行時、public/buildrev-manifest.json というファイルが出力されます。このファイルを見てみると…

{
  "css/app.css": "css/app-6ac487d735.css"
}

となっています。このファイルを読み込んで HTMLlink 要素や script 要素を書けばよいわけですね。PHPの人は Illuminate/Foundation/helpers.phpelixir 関数をパクっちゃえばおk。他の言語の人はヘルパーメソッドを作ればいけるはずです。

<?php
if (! function_exists('elixir')) {
    /**
     * Get the path to a versioned Elixir file.
     *
     * @param  string  $file
     * @return string
     *
     * @throws \InvalidArgumentException
     */
    function elixir($file)
    {
        static $manifest = null;

        if (is_null($manifest)) {
            $manifest = json_decode(file_get_contents(public_path('build/rev-manifest.json')), true);
        }

        if (isset($manifest[$file])) {
            return '/build/'.$manifest[$file];
        }

        throw new InvalidArgumentException("File {$file} not defined in asset manifest.");
    }
}

framework/helpers.php at 5.1 · laravel/framework · GitHub

設定の変更

他のフレームワークを使っている人はこのディレクトリ構成がきっと合わないと思います。Laravel-Elixir はディレクトリの設定を設定ファイルに外出ししてるので自由に変更することができます。設定値は node_modules/laravel-elixir/Config.js にあります。この設定を gulpfile.js で上書きしてやると良い感じになります。とりあえずディレクトリ周りだけ、抜き出しておきます。

設定 初期値
elixir.config.assetsPath resources/assets
elixir.config.publicPath public
elixir.config.appPath app
elixir.config.css.folder css
elixir.config.css.outputFolder css
elixir.config.sass.folder sass
elixir.config.less.folder less
elixir.config.js.folder js
elixir.config.js.outputFolder js
elixir.config.coffee.folder coffee
elixir.config.versioning.buildFolder build

多分ですが、Rails だとこんな感じ?(全然自信ない)

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

// 設定値を上書き
elixir.config.assetsPath = 'app/assets/';
elixir.config.js.folder  = 'javascripts'

elixir(function(mix) {
    mix.sass('app.scss')
       .babel('app.js');
});

最後に

いかがでしたでしょうか? 僕が好んで使っている Laravel-Elixir の魅力が他の人に少しでも伝われば幸いです。他の機能は Laravel Elixir 5.1 Laravel を見てください。いろいろできますよ。メソッドチェインでさらさら書けるのはやはりよいものです。

最後に自分が使ってる gulpfile.js を例に出しておきます。

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

elixir(function(mix) {
    mix.sass('app.scss')
        .browserify('app.js')
        .copy(
        'node_modules/font-awesome/fonts',
        'public/build/fonts'
        ).version(['css/app.css', 'js/app.js']);
        .browserSync({proxy: 'works.dev'});
});

こんな感じ。やってることを軽く説明すると

  • resources/assets/sass/app.scss を sass コンパイル
  • resources/assets/js/app.js を browserify. この時 babelifypartialify も走ってるっぽい
  • font-awesome の font ファイル一式を public/build/fonts にコピー
  • public/css/app.csspublic/js/app.js をバージョン化
  • 最後に BrowserSync*1

参考

宣伝

年明けに Laravel の本が出ます。LTS である 5.1 を対象にして書いています。とても良い本に仕上がってると思います。よろしくお願いします。

www.amazon.co.jp

で、この本の出版記念というか販促も兼ねてと言うか 12/2 19:30 から Fukuoka.php Vol.16 で喋らせて頂きます。内容としては、出版間近の本の内容とリリース間近っぽい 5.2 の新機能の解説をします。こちらもよろしくお願いします

*1:実は最近使ってなかったり…。待ちきれずF5押してしまう