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