こんにちは、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
というファイルを作成して、下記のように編集します。
alert('Hello World!');
これでOKです。
webpack.mix.jsの編集
laravel_mix/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タグを追加してください。
<!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
以下のようにしてください。
mix.sass('resources/sass/app.sass', 'public/css'); // Sassの場合
Viewファイルのheadタグ
内に下記を追加してください。
<!-- Sass -->
<head>
<link rel="stylesheet" href="{{ mix('/css/app.css') }}">
</head>
最後に
これでLaravel Mixを使用して、JavaScriptやSassを使いこなすことができると思います。
ぜひ試してみてください!
少しでも役に立った!という時は、いいねをポチッとして
フォローしてくださると嬉しいです、、、笑
役に立たなかった時は、怒らないでコメント頂けますと幸いです笑
Twitterもやってますので、よかったら見てみてくださいね!
https://twitter.com/jefftechsaku