他のフレームワークでも使える 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 管理と言われるものはたいていできます。
- CSS/Javascript の結合や Minify
- Sass/LESSのコンパイル
- CoffeeScriptやES2015(babel)のコンパイル
- browserify を使ったモジュール管理
- BrowserSync
- CSS/Javascriptのフィンガープリンティング(Laravel-Elixirではversionといってます)
欲しいものは大体揃ってるんじゃないかなと思います。あとはテスト支援としてテストファイルを監視して
- PHPUnit
- phpspec
の実行が可能です。
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/sass
に app.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/css
に app-6ac487d735.css
というファイルが出力されます。app-
から先の乱数の部分は実行するたびに変化します。で、ここからが肝ですが version
タスク実行時、public/build
に rev-manifest.json
というファイルが出力されます。このファイルを見てみると…
{ "css/app.css": "css/app-6ac487d735.css" }
となっています。このファイルを読み込んで HTML
の link
要素や script
要素を書けばよいわけですね。PHPの人は Illuminate/Foundation/helpers.php
の elixir
関数をパクっちゃえばお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. この時babelify
とpartialify
も走ってるっぽい- font-awesome の font ファイル一式を
public/build/fonts
にコピー public/css/app.css
とpublic/js/app.js
をバージョン化- 最後に BrowserSync*1
参考
- Laravel Elixir 5.1 Laravel
- Meet Elixir, the Laravel Way of Compiling Assets 英語記事ですが詳しく書いています。
宣伝
年明けに Laravel の本が出ます。LTS である 5.1 を対象にして書いています。とても良い本に仕上がってると思います。よろしくお願いします。
で、この本の出版記念というか販促も兼ねてと言うか 12/2 19:30 から Fukuoka.php Vol.16 で喋らせて頂きます。内容としては、出版間近の本の内容とリリース間近っぽい 5.2 の新機能の解説をします。こちらもよろしくお願いします
*1:実は最近使ってなかったり…。待ちきれずF5押してしまう