kore1server

Laravel5.5LTS、AtoZ#3、Mixは何が便利なのか

タグ： Laravel5.5  

Laravel Mixはアセットの自動コンパイルを行ってくれます。リソースの変化が起きたときに、表示画面をリフレッシュし、接続しているページをまとめて遷移してくれるBrowserSyncと連動されると、とても便利です。

分かっている人はこの程度の説明で十分理解できますが、今まで使ったことのない人には全く利便性が実感できません。ですから、一度使ってみましょう。

自動コンパイル程度であれば、現在のIDEであればサポートしているものも多いです。どれが便利かは環境や好みの違いで異なります。無理にMixを使用する必要はありません。

ホストマシンのIDEなどからSSHなどで接続する場合には、接続情報が必要となります。Homestead環境のデフォルトユーザーはvagrant、パスワードもvagrantです。ユートユーザーのパスワードは設定されていません。SSH接続時の公開鍵はHomestead.yamlで指定されているものです。

もし、公式ドキュメントに書かれていること以上を行いたい場合は、Laravel Mixを追求するよりも、Webpackを直接学んだほうが効率が良いでしょう。

Homesteadでインストール

Homesteadを使用すれば、Nodeのバージョンの違いなどに悩むこと無く、準備が整っているものをそのまま使用できます。

インストール済みのLaravelフレームワークのルートディレクトリで、インストールを指示します。

npm install

依存パッケージ数が膨大なため、インストールにはそれなりの時間がかかります。

webpack.mix.js

デフォルトの設定では、アセットの自動コンパイルのみです。アクセスした表示ページをリソース変更時に自動更新してくれる、BrowserSyncも動作するようにしましょう。

パッケージルートディレクトリに存在する、webpack.mix.jsのmix関数のチェーンを変更します。

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css')
   .browserSync();

brosersync()関数をチェーンしただけです。

続いて、追加の依存パッケージをインストールするため、一度コンパイル指定します。

npm run dev

これを実行していないと、npm run watchの実行時にエラーで止まってしまいます。

変更の監視

これで、ファイルが変更されると、接続しているページを自動的に再読込してくれるようになりました。監視してみましょう。

npm run watch

監視中はコンソールへ制御が戻ってきません。監視を中止する場合は、CTRL+Cで停止します。

以下のように表示されると思います。

[Browsersync] Proxying: http://app.dev
[Browsersync] Access URLs:
 ----------------------------------
       Local: http://localhost:3000
    External: http://10.0.2.15:3000
 ----------------------------------
          UI: http://localhost:3001
 UI External: http://10.0.2.15:3001
 ----------------------------------
[Browsersync] Watching files...
[Browsersync] Couldn't open browser (if you are using BrowserSync in a headless environment, you might want to set the open option to false)
[Browsersync] Reloading Browsers...

今回、ドメインはinstall.localを使っています。ホストのブラウザからこのドメインを指定すればWebサーバー（80番ポート）経由で、インストールしたLaravelフレームワークのpublicディレクトリへアクセスします。

上に指定されているポート番号へ注目してください。3000番と3001番が使用されています。3000ポートへアクセスすると、BrowserSync経由でWebサーバーへアクセスします。直接Webサーバーへアクセスしたときと同じ内容が表示されますが、BrowserSyncがプロキシ動作し、中継します。BrowserSyncが表示するWebページヘ再読み込みを実行するJavaScriptを埋め込むわけです。

では、ホストのWebブラウザからは、install.local:3000へアクセスしてください。

ホストのhostsファイルにより、install.localはHomestead環境のIPアドレスである192.168.10.10とわかります。ブラウザのリクエストはHomesteadへ渡ります。Homestead環境ではBrowserSyncが3000番ポートをリッスンしているため、一度リクエストを受け取ります。次に出力内容を得るために、80ポート担当のWebブラウザへinstall.localのURLでアクセスし、戻ってきたリクエストにより表示内容を取得します。最後に表示内容に再読み込みのJavaScriptを仕込み、アクセス元のブラウザへ送り返します。

また、BrowserSyncは3001番ポートを自身の設定ページのために見張っています。ですから、ホスト側からinstall.local:3001へアクセスすると、BrowserSyncの設定ページヘアクセスできます。

External: http://10.0.2.15:3000と表示していますが、IPアドレスはHomesteadが用意したアドレスで、ホストマシンからこのIPアドレスを指定しても、Homesteadまでアクセスは届きません。そのため、このURLではアクセスできません。

リソースファイルの変更

まず、Homestead内でファイルを変更してみましょう。install.local:3000のページはあらかじめ表示しておきましょう。現在、監視中のコンソールは制御が戻ってきませんので、別のコンソールを開いてください。vagrant sshで接続し、~/install/resources/views/welcome.blade.phpファイルをvimなどのエディターで開いてください。

次に、内容を変更しましょう。８２行めの"Laravel"がデモページ中央に表示されている文言です。これを変更するのがわかりやすいでしょう。

変更内容を保存したら、ブラウザで表示されているページが自動に再読込され、修正した内容で表示されることを確認してください。

この段階で、ファイル変更の監視が聞かない場合は、watchの代わりに、watch-pollを使用し、試してください。

npm run watch-poll

これでもだめなら、お手上げです。

ホストからの変更

Homestead内部での変更が監視できていれば、次にホスト側からの変更でも監視が動作するかを確認してください。

ファイル共有しているディレクトリの、resources/views/welcome.blade.phpビューファイルを同様に変更し、保存と同時にブラウザに表示される内容も変更されるかチェックしてください。

変更されない場合、ファイル変更のイベントがHomestead内で通知されない状態ですので、解決法を参考にしてください。

監視対象ファイル

変更を監視する対象のファイルは、node_modules/laravel-mix/src/builder/webpack-plugins.jsで定義されています。

...
            new BrowserSyncPlugin(
                Object.assign({
                    host: 'localhost',
                    port: 3000,
                    proxy: 'app.dev',
                    files: [
                        'app/**/*.php',
                        'resources/views/**/*.php',
                        'public/js/**/*.js',
                        'public/css/**/*.css'
                    ],
...

ご覧の通り、appディレクトリ下のPHPファイルを再帰的に、views下のPHPファイル（ビュー）を再帰的に、後はpublicのjsとcssファイルを監視対象としています。監視対象のいずれかに変化が起きれば、コンパイルなどのビルド処理が実行されます。

Mixが行うCSSとJavaScriptのコンパイル処理などは、出力先がpublicディレクトリのcss／jsディレクトリです。そのためこの監視設定で、コンパイル処理が行われると必ずBrowserSyncにより、ページの再読み込みが行われます。

今まではresources/views下のビューファイルを変更したため、保存するごとにブラウザが再表示され、新しい内容で表示されたわけです。

CSSの変更

Laravelはデフォルトの状態でTwitter bootstrap CSSフレームワークを含んでいます。今まで変更したwelcome.blade.phpは残念ながら、bootstrapを使用していません。内容を変更しましょう。

<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Laravel') }}</title>

    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
    <div class="content">
        <div class="jumbotron">
            <div class="container">
                <h1>ドーン</h1>
                <p>通常のテキスト</p>
                <p><a href="#">リンク色</a></p>
            </div>
        </div>
    </div>

    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}"></script>
</body>
</html>

監視を継続していれば、保存後すぐに内容が反映されます。

bootstrapのリンク色は、プライマリーカラーが利用されます。デフォルトのプライマリーカラーは水色です。これを変更してみましょう。

resources/assets/sass/_variables.scssをエディターで開きます。$brand-primary変数が表すプライマリーカラーを適当に変更し、保存してみましょう。リンク色が反映されます。

利便性

これで、Mixが提供する利便性が理解できたかと思います。CSSやJavaScript、app下のコード、ビューファイルが変更されると、その結果を反映させるために、ブラウザの再読み込みを自分で行わくても、自動で行ってくれるのです。

これは大抵の人には便利でしょう。逆に、うざったいと感じる人もいるでしょう。

何度もこのサイトで書いているのですが、この手の処理でどうしてもMixを使う必要があるわけでありません。同様な自動化はIDEなどに組み込まれていたり、CSSフレームワークが提供していたりします。

特に今までこうした作業の自動化を行ってこなかった方で、初めて使用する人であれば、ドキュメントに書かれている範囲で利用する分には便利です。