あじちゃんのブログ。備忘録。

〜SEもOLなんですかね?

Laravel Mixを使おう!

laravel mix とは

一言で言うと、

  • web packの設定を簡単に書くことができるlaravel向けのnpmパッケージ

なのですが。これ言われても意味わかんなかったので噛み砕きます。分かる人は飛ばして。

web packはwebコンテンツを構成するJavaScriptやSassなどのリソースを モジュール と言う単位で取り扱い、
複数のモジュールを1つにまとめたファイルを出力・最適な形に作り変えてくれるツールです。
(例:3つのJavaScriptをまとめて1ファイルの呼び出しで良いようにしてくれる)
ざっくり言うと リソースの依存関係を解消してくれるコンパイラ です。

導入方法

導入にはグローバルインストールとローカルインストールがある。
グローバルインストールはwebpackを利用したいディレクトリ(プロジェクト)以外の 全ての環境に影響を及ぼす ので各自よしなにお願いします。

  • グローバルインストールの場合
cd ~/
npm install webpack -g
  • ローカルインストールの場合
cd [目的のプロジェクトルート]
npm install --save-dev webpack
  • (必要ならば)足りないパッケージを補うため以下のコマンドを実行
npm init -y

使用方法

準備

  • node/npmをインストール(yarnでもOK)
  • Laravel 5.* のプロジェクトを作成
  • npm installを実行

  • プロジェクトルートに「webpack.mix.js」があるのでコンパイルの対象を追加(JSファイルやSassファイルなど)

// mix.js('ビルド元のソースコード', 'ビルド済みファイル出力場所')
// 例
mix.js('resources/assets/js/common.js', 'public/js')
    .js('resources/assets/js/sub.js', 'public/js')
  • viewでの呼び出しを追加
<!-- これで上記2つのjsが読み込まれる -->
<head>
   <script type="text/javascript" src="{{ mix('js/common.js') }}"></script>
</head>

実行

npm run dev

f:id:azix:20180515182735p:plain こんな感じの結果で、 DONE が表示されていたら成功!

  • jsやcssを即時でコンパイルしたい場合(書きながらすぐ反映させたい時)
npm run watch

終わらせるときは ctr + C でOK.