こんにちは、JeffTechです。

この記事で実現できること

Laravel Mixの使い方を理解する

開発環境

PHP7系
Laravel6系
Laravel Mix
JavaScript
MacOS

説明

今回は、LaravelでSassやJavaScriptなどを扱うときに便利なLaravel Mixの使い方を説明していきます。
この記事では、Laravel Mixを使用してJavaScriptのalertメソッドで、Hello World!と出力させます。

実装の流れ

Laravelプロジェクトのインストール
npm installコマンドの実行
JavaScriptファイルを作成
webpack.mix.jsの編集
Viewファイルで読み込む
npm run dev
Sassの場合

実装

Laravelプロジェクトのインストール

まずはLaravelのインストールからです。
今回はlaravel_mixというプロジェクト名にしています。

$ composer create-project --prefer-dist laravel/laravel laravel_mix "6.*"

これで、laravel_mixというLaravel6のプロジェクトがインストールされました。

npm installコマンドの実行

無事インストールが終わったら、プロジェクトフォルダであるLaravel_mixディレクトリに移動して、npm installコマンドを実行します。

もし、Node.jsをインストールしていない場合は、こちらからダウンロードしてください。Node.jsをインストールすれば、npmも使えるようになります。
Node.jsがインストールできたら、下記コマンドを入力して確かめてみましょう。

$ node -v

$ npm -v

両方ともバージョンが表示されれば、OKです。

ちなみに、npmはNode Package Managerの略でNode.jsのパッケージマネージャーのことです。PHPでいうところの、composerの役割を担ってくれています。
つまり、Node.jsで動くパッケージをインストール・アンインストールするにはnpmコマンドを実行することになります。

$ npm install

-----省略-----
48 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

上記のようになれば、Laravel Mixが使えるようになっています。

JavaScriptファイルを作成

今回は、Hello World!とアラートで出力させたいので、laravel_mix/resources/jsディレクトリに、helloWorld.jsというファイルを作成して、下記のように編集します。

helloWorld.js

alert('Hello World!');

これでOKです。

webpack.mix.jsの編集

laravel_mix/webpack.mix.jsを下記のように編集してください。

webpack.mix.js

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .js('resources/js/helloWorld.js', 'public/js') // この行を追加
    .sass('resources/sass/app.scss', 'public/css');

これで、helloWorld.jsが読み込まれることになります。

Viewファイルで読み込む

今回は、laravel_mix/resources/views/welcome.blade.phpでHello World!と出力させてみます。
そのため、下記のようにscriptタグを追加してください。

welcome.blade.php

<!DOCTYPE html>
    ーー省略ーー
    <body>
        <div class="flex-center position-ref full-height">
        ーー省略ーー
        </div>
        <script src="{{ mix('js/helloWorld.js') }}"></script> <!-- この行を追加 -->
    </body>
</html>

これでwelcome.blade.phpでhelloWorld.jsが読み込まれるようになりました。

npm run dev

それでは、最後にコンパイルしていきます。

$ npm run dev

-----省略-----
 DONE  Compiled successfully in 2161ms

のようになれば、成功です。

php artisan serveでサーバーを立ち上げて、ブラウザで確認してみましょう！
Hello World!とアラートが出力されましたか？
Laravel Mixを使うと、こんな感じで簡単にJavaScriptを扱うことができます。

Sassの場合

Sassの場合はwebpack.mix.js以下のようにしてください。

webpack.mix.js

mix.sass('resources/sass/app.sass', 'public/css'); // Sassの場合

Viewファイルのheadタグ内に下記を追加してください。

viewファイル

<!-- Sass -->
<head>
    <link rel="stylesheet" href="{{ mix('/css/app.css') }}">
</head>

最後に

これでLaravel Mixを使用して、JavaScriptやSassを使いこなすことができると思います。
ぜひ試してみてください！

少しでも役に立った！という時は、いいねをポチッとして
フォローしてくださると嬉しいです、、、笑

役に立たなかった時は、怒らないでコメント頂けますと幸いです笑

Twitterもやってますので、よかったら見てみてくださいね！
https://twitter.com/jefftechsaku