コード（とコメント）で学ぶLaravel Elixir
タグ： Laravel5.1 Laravel5.2
コメントで語る川瀬です。Laravel Elixirはサンプルを見てもらえば簡単ですから、紹介します。インストール手順は、Elixirのドキュメントを参照してください。
追記：初公開の記事から多少手を入れました。copyとBrowserSyncの解説を修正しました。
元々Laravelに含まれているnpmの依存を記述するファイル、package.jsonにはsass版のBootstrapがあらかじめ書かれていますので、これを利用する例です。バージョン5.1と5.2の両方で動作します。
まず、SASSファイルを保存するresources/assets/sassディレクトリーに用意されている、app.scssファイル中のコメントを外してください。npmによりインストールされたBootstrapのSASSファイルを取り込むように指示します。
// package.jsonの依存として"bootstrap-sass": "^3.0.0"が指定されているため、 // npm installコマンド実行で、node_modulesディレクトリーへbootstrap-sassが用意される @import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
次に、インストール直後のルートURLで表示される、resources/views/welcome.blade.phpファイルにてBootstrap CSSフレームワークを使用するように変更します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Laravel Exiler Sample</title>
<!-- Bootstrap -->
<link href="{{ elixir('css/app.css') }}" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<h1>Hello, Laravel!</h1>
<ul class="nav nav-pills">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Sample1</a></li>
<li role="presentation"><a href="#">Sample2</a></li>
</ul>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
cssの変更時にキャッシュがどこかに保持され、変更が反映されないトラブルを避けるために、Laravel Elixerのバージョニング機能を利用します。ファイル名にランダムな文字列をつけ、変更されると毎回別ファイルとしてアクセスさせます。
<link href="{{ elixir('css/app.css') }}" rel="stylesheet">のelixirメソッドでバージョン付されたファイルをCSSファイルとして読みこむように指示しています。
最後にgulpfile.jsを次のように変更します。
// Copyright on Hirohisa Kawase, if you post about this, link here please.
var elixir = require('laravel-elixir');
elixir(function(mix) {
// BrowserSync、複数ページヘの操作とリソースの変更を自動的に反映する
// gulp watch実行時のみ起動する（実際にはサブコマンド無しでgulp実行時でも起動するが、初期化されていないためすぐに停止する。）
// gulp watch起動時にAccess URLへのアクセスに失敗することもある。
// その場合でも、端末で表示されるAccess URLへアクセスしなおせば、動作する。
mix.browserSync({proxy:'some.local'})
// 第一引数でオプションを指定、proxy指定省略時はhomestead.appがプロキシURLとして利用される。
// プロキシには、そのプロジェクトの仮想ホスト名を指定する。
// PHP組み込みサーバを使用する場合は、php artisan serve --host=127.10.10.10などのように
// localhostのループバック(127.0.0.1)を避け、proxyとして127.10.10.10:8000と指定する。
// SASSコンパイル
// gulp --production実行時にはコンプレスされる
// resources/assets/sassがデフォルト入力ディレクトリ
// public/cssがデフォルト出力ディレクトリ
.sass('app.scss')
// app.cssのバージョン付け
// publicがデフォルト入力ディレクトリ
// public/buildがデフォルト出力ディレクトリ
// ビュー中の{{ elixir(ファイル位置) }}のベースはpublic/buildディレクトリー
.version('css/app.css')
// copyファイル
.copy('node_modules/bootstrap-sass/assets/javascripts/bootstrap.min.js', 'public/js/bootstrap.min.js');
});
以上、コメントの通りです。mixに続けているメソッドは、Laravel Elixirのタスクです。Gulpのタスクと概念が混ざってしまうと、理解がややこしくなるために、mixという言葉を使っているのでしょう。Elixirのソースではtaskという言葉を使っているため、ソースを読む方は気をつけましょう。
gulpで実行する場合、Elixirタスクは記述順に実行されます。BrowserSyncは動作しません。
gulp watchで実行する場合、Elixirタスクは非同期に実行されます。デフォルトの入力ディレクトリーが決まっているタスクでは、それらのタスクがファイル変更の監視対象になっており、変化が会った時にタスクが実行されます。また、入力ファイルやディレクトリーを指定する場合は、そのファイルやディレクトリーが変更の監視対象となります。
最初にgulpを実行します。watch時のcopyは当初動作しない仕様でした。それでは不便なため、コピー元のファイルを監視、コピー先を監視対象外にする仕様に変更になりました。ですが、上記のコードはwatch時にコピーされません。そのため、最初にgulpのみで実行する必要があります。
以降はgulp watchを実行します。このコマンドは実行し続け、ファイルの変更を監視します。実際にwelcome.blade.phpビューファイルの内容を変更したり、app.scssファイルにたとえばbody{background-color:green;}などを付け加えたりしてください。保存すると、BrowserSyncの機能により、表示されているページが同期して変更されます。
複数のタブやブラウザ、モバイル機器で表示しておけば、全部一度に変更が反映されます。また、同期中のページを操作すれば、それが基本的に同期している全部のページで連動して動きます。（動かないこともあります。完全に連動するというわけではありません。それでも便利です。）
gulp --productionでリソースがミニファイされます。