コード(とコメント)で学ぶ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
でリソースがミニファイされます。