Allied ArchitectsAllied ArchitectsEngineer Blog

Laravel Elixirを使ってみた(Advent Calendar 7日目)

2014/12/7 PHP

ごあいさつ

アライドアーキテクツAdvent Calendar 7日目を担当する石川です。最近Laravelにどっぷり浸かっています。

(僕は業務ではLaravel使ってないんですが・・・使いたいなぁ[壁]д・)チラッ

現在のLaravelの最新バージョンは4.2ですが、おそらく来年の頭にLaravel5がリリースされますので、先走ってLaravel5の新機能のひとつ、Laravel Elixirでごにょごにょしてみます(既に何個か記事が上がっていて、何番煎じだよ的な感じは否めないですがw)。なお、今Laravel5を入れる人に初心者なんていねーだろと思いつつ、環境構築からつらつらと書いていこうと思います。僕の備忘も兼ねて。

Laravel Elixir?

laravel/elixir

Laravel5の新機能について調べていた時、laracastsで配信されている動画を見て、完全にハートを射抜かれてしまいました。

特にtddタスク実行中のターミナル通知!!これを見て下さいよ!!

tdd_green

tdd_red

カッコいい!!これやりたい!!こういうのはIDEのsave actionで引っ掛けてやれよとかそういう話ではないのです。男はいつだってカッコいいモノに憧れる生き物なのです。

Laravel Elixir!

Laravel Elixirはフロントエンドの汎用的なgulpタスク+Laravel向けのgulpタスクがひとまとめになったものです。
ドキュメントを読むと以下の様な事が出来るとあります。

  • less、sass、coffeeスクリプトのコンパイル
  • css、javascriptのcombine、minify
  • phpUnit/phpSpecの実行
  • Laravel5で新たに追加されたroute、eventスキャンの実行
  • assets変更時の自動更新(watch)
  • クラス変更時の自動単体テスト実行(tdd)

では早速やっていきましょう。

Homesteadによる環境構築

Homestead

Laravel5の環境構築ですが、手っ取り早く始められるのでHomesteadを使うことにします。

HomesteadはLaravel実行環境に用の仮想イメージと、nginxの設定等のプロビジョニングがセットになったもので、とりあえず落としてきてvagrant upすればLaravelの実行環境が一撃で手に入ります。

・・・というのが僕の認識だったのですが、このブログを書くにあたって改めてインストールしてみたらなんとhomesteadがcliツールになっていました。ちょっと捕捉していきます。

homestead cli

とりあえずドキュメントの通りにインストールします。(事前にVagrant,VirtualBox,composerなんかは入手しといてください)

これで~/.composer/vendor/bin/homesteadが用意されます。~/.composer/vendor/binにパスを通しておきましょう。

このコマンドを叩くと~/.homestead配下に以下のファイルが用意されます。

  • Homestead.Yaml
  • after.sh
  • aliases

Homestead.Yaml

Homestead.Yamlは「VagrantFileの書き方わかんなーい!」という人でも安心なYamlファイルです。中身は以下の様になっています。

それぞれの書き方は公式Documentを参考にしてもらうとして、編集する箇所だけ言及します。

でHomestead.Yamlを編集するエディタが開きます。

folders

仮想マシンとの共有フォルダを指定するプロパティです。僕はソースコードは~/Codeではなく、~/Developに保存しているので以下の様に置き換えていきます。

sites

sites

公開するサイトの指定をしていきます。mapにドメインを指定して、実際のディレクトリをtoで指定します。

僕は今回サンプルとして~/Develop/laravel5というプロジェクトを作るので以下の様にします。

after.sh

プロビジョニングを行うシェルです。Homesteadは元からnginxやdatabaseの設定をしてくれるので特に何もしなくてOKです。

aliases

仮想環境のbash_aliasesを設定するファイルです。お好みでどうぞ。とりあえずPHPUnitとartisanのaliasを登録しておこうと思います。

hostsの編集

/etc/hostsファイルの中身を以下の様にしときましょう。

ポートフォワードも出来るようになってるので以下でもOKです。

どこのポートが対応してるのかはドキュメントを参考にしてどうぞ。

いざ起動

これで仮想マシンが立ち上がるはずです!

ちなみに僕は何故かこれで仮想マシンが立ち上げ途中で失敗した(stdin: is not ttyって出て止まる)ので、

としたら普通にうまくいきました。homesteadコマンドは内部ではvagrantコマンド叩いてるだけなんでこれで良いです。

Laravel5プロジェクトを作る&もろもろ依存パッケージ群の取得

Homesteadの設定だけでやたら長くなってしまったwようやくこっからが本筋です。とりあえず仮想マシンにログインしましょう。

Laravel5プロジェクトの作成

先ほどHomestead.Yamlのsitesの項でlaravel5というプロジェクトを公開する様に設定したので、それに合わせてプロジェクトを作成します。

これでOKです!laravel5プロジェクトが作成されました。プロジェクトディレクトリに移っていきましょう。

もろもろ依存パッケージ群の取得

Node.js

package.jsonがありますので、npmコマンドでパッケージをインストールします。

HomesteadにはもともとNode.jsも入ってますのでコマンド叩いていくだけです。楽チンですね。

bower

bower.jsonがありますので、bowerコマンドでパッケージをインストールします。

Homesteadにはもともとbowerも入ってますのでコマンド叩いていくだけです。楽チンですね。

この辺僕が初めて触った時はロクなドキュメントが無くて結構つまづいたんですけど、ここ最近でいっぱい良い記事が上がってるおかげでみんなはコマンドを叩いていくだけです。楽チンですね。(僕は最初このbower installやらなかったせいでgulpうまくいかねーよ状態でした)

ようやくLaravel Elixirみていくよ!

はやる気持ちを抑えてgulpfile.jsの中身を見てみましょう。

こんな感じです。上記のコードが実行されると以下の順でタスクを実行していきます。

  1. 1.resources/assets/sass/app.scssをコンパイル
  2. 2.vendor/bower_components/bootstrap-sass-official/assets/javascripts/bootstrap.jspublic/js/vendor/bootstrap.jsにコピー(publishメソッドはvendor/bower_components配下の指定されたファイルをコピーするメソッド)
  3. 3.vendor/bower_components/font-awesome/css/...をpublish
  4. 4.vendor/bower_components/font-awesome/fonts/...をpublish

とにかくわかりやすいです。こういうタスクランナーって注意しないととっ散らかるイメージがあるんですが、これならスッキリしそうな予感がします。ちなみに僕はnode.jsはほとんど触ったこと無いんですが、elixirのコード自体もすごく読みやすいので見てみると良いと思います。

Laravel Elixirよ!俺に力を!!

ついにこの時がきました。ここで実行すれば「sassがコンパイルされたよ!やったね!」的なメッセージを出してくれるはずです!ここからはハイテンションでお届けします。

さぁLaravel Elixirよ、君はどんな未来を見せてくれるんだい?

notify_error

なぬー!!ターミナル通知が出ない!!

[13:07:54] Using gulpfile ~/Develop/laravel5/gulpfile.js
[13:07:54] Starting ‘default’…
[13:07:54] Starting ‘sass’…
[13:07:57] Finished ‘default’ after 2.29 s
[13:07:58] gulp-notify: [Laravel Elixir]
[13:07:58] Finished ‘sass’ after 3.19 s
[13:07:58] Starting ‘publish’…
[13:07:58] gulp-notify: [Error in notifier] Error in plugin ‘gulp-notify’
not found: notify-send
[13:07:58] Finished ‘publish’ after 91 ms

何か出てる・・・。

ここでハッと気づきました。ここは仮想マシン内。ターミナル通知もへったくれもない世界です。夢は潰えた。。。

諦めたらそこで試合終了だよ

ググってたら見つけましたよ。vagrant-notifyなるプラグインを。仮想マシンの中でnotify-sendを受け取ったらホストマシンに転送してくれるみたいです。

インストール

vagrant-notify

プラグイン導入後は再度プロビジョニングが必要です。(homestead、reloadコマンドが無いっす・・・)

notify-sendコマンドの用意

Documentにある通り、Mac OSの場合はnotify-sendスクリプトをパスの通ったところに用意する必要があるみたいです。また、スクリプト内からターミナル通知をする為にterminal-notifierが必要なので、これもインストールしちゃいましょう。

notify-sendの中身はこんな感じです。

(vagrant-notifyが↓の様な形式で呼び出すため、それを受ける形です)

実行可能な様にパーミッションを変更します。

これでOKです!

何度でも蘇るさ!!

さぁこれで問題は無いはず!!!

notify

やった!ついに出ました!!感無量です!!

本当はコンパイルしたよ!って教えてくれるはずだけどね!

Elixirの中身見ていくと、Notification.jsの中でこんな感じのことしてます。

そもそもlinuxのnotifierであるnotify-sendはsubtitleを受けられないのでそれが消えちゃうんですね。osモジュール使って処理してたりしたので一旦諦めました。。。

tddタスクを実行してみる

それでは最後に動画にあったtddタスクを実行してみようと思います。

内部でwatcherが起動しています。この状態でこんな感じのテストを書いてみます。

現在存在しない「test」というURIにアクセスするテストを書きます。保存すると・・・

Red

はい、テストが失敗しました。では、routes.phpにコードを追加しましょう。

“test”URIを追加しました。保存します。

Green

Greenです!いいですね!!かっこいい!!これでRed-Green-Refactoringの流れがさらに気持ちよくなりそうですね!!

おわりに

Laravelまわりのものを触っていると、なんでこんなものが用意されているんだろうって思うものがあります。homestead cliもそうです。中身なんてvagrantコマンドのただのラッパーです。

LaravelはモダンなPHP開発を提供してくれます。ただその一方でPHP界隈にはまだまだモダンな開発からは遠いところに居る人がいっぱいます。そういう人でも簡単に、わかりやすく使える様にしてくれているのかな?と勝手に思っています。(homestead cliではVagrantFileのややこしい部分が隠蔽されて、Homestead.Yamlで簡単に設定できる様になっていますしね)

Laravel Elixirも所謂タスクランナーのちょっと面倒なところをシンプルに提供してくれたおかげで、簡単にタスクランナー導入することが出来ました。こういう恩恵が受けられるのも、Laravelの良いところですね。さぁ、みんなもLaravel使ってドヤ顔コーディングしようぜ!(これが言いたかった

明日は謎の刺客Tarou Yamadaさんにカレンダーを乗っ取られてしまったcobonasの番です!

ishikawa.yuya
  • ishikawa.yuya
  • Webエンジニア
  • MONIPLA for Facebookの開発を担当しています。移ろいやすい性分なので そのときそのときで気になってることとかを書いています。 難しいことも出来るだけシンプルに、わかりやすく発信していきたいと思います。

RELATION ENTRY

良書です。『Laravelエキスパート養成読本』。

良書です。『Laravelエキスパート養...

2015/05/2 書籍

ごあいさつ お久しぶりです。アライドアーキテクツカードゲーム部部長の石川です。最近タルキール龍紀伝×運命再編ドラフトにハマっています。以前リアルなカードゲームショップでガチな空気感の中ドラフトを行ってトラウマを抱えて以来、もっぱらオンライン専門のドラフターになっています。誰か僕と一緒に優しく楽しく...

続きを読む

Laravel5でサンプルアプリケーションを作成する(Advent Calendar 17日目)

Laravel5でサンプルアプリケーショ...

2014/12/17 PHP

アライドアーキテクツ Advent Calendar 17日目 兼 Laravel Advent Calendar 2014 17日目 の記事です ごあいさつ Laravel AdventCalendarの総支配人のytakeさんにQiitaのアドベントカレンダーと会社のアドベントカレンダー...

続きを読む

ishikawa.yuyaの記事一覧へ

ページTOPへ