Laravel Mixでフロントエンド開発環境を手軽に構築　2020年版作業環境を晒します〜フロントエンド開発環境編〜

前回の記事でビルドツール遍歴をご紹介しましたが、今回は現在使用しているLaravel Mixの設定についてご紹介します。

tech.arms-soft.co.jp

Webpackを使用するとなると設定が複雑で行数も結構な数になってしまいますが、Laravel Mixを使うことで少ない行数で設定できてしまうので、簡単にフロントエンドの開発環境を構築できます。
サンプルファイルもダウンロードできますので、興味がありましたらお試しください。

そもそもLaravel Mixとは

Laravel Mixは、PHPフレームワーク「Laravel」に同梱されているビルドツールです。
現在主流のWebpackがベースになっており、Laravelを使用しなくても使うことができます。
とにかく設定ファイルがシンプルで、ビルドのスピードも申し分ありません。

1. まずはインストール

該当のディレクトリで下記コマンドを実行し、Laravel Mixをインストールします。同時にcross-envもインストールしておきます。

npm install laravel-mix cross-env --save-dev

2. package.jsonにスクリプトを追加

{
  "scripts": {
    "dev": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js --watch",
    "prod": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  }
}

コマンドは3つです。

コマンド	動作
`npm run dev`	ファイルのコンパイル
`npm run watch`	`npm run dev` + ファイルの変更を監視
`npm run prod`	ファイルのコンパイル + 圧縮

最終的なpackage.json

{
  "scripts": {
    "dev": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js --watch",
    "prod": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "devDependencies": {
    "cross-env": "^7.0.2",
    "laravel-mix": "^5.0.4"
  }
}

設定ファイルを作成

Laravel Mixの設定ファイルは「webpack.mix.js」というファイルをプロジェクトルートへ配置する形になります。

まずはLaravel Mixを読み込む

最初の行でLaravel Mixを読み込みます。

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

JavaScriptの設定

mix.js('src/app.js', 'dist/');

基本的な設定方法です。上記はsrc/app.jsをdist/app.jsへビルドするコードです。
下記が動作します。

ES2017のコンパイル
Vue.jsのコンパイル
ツリーシェイキング（未使用のコードを削除）
ライブラリの分割
ホットモジュール

ファイル名も指定する場合

mix.js('src/app.js', 'dist/build.js');

複数のファイルをバンドルする場合

mix.js([
  'src/one.js',
  'src/two.js'
], 'dist/bundle.js');

複数のエントリーがある場合

mix.js('src/app.js', 'dist/')
   .js('src/form.js', 'dist/');

CSSコンパイルの設定

Scss（Sass）だけでなく、PostCSSやLess、Stylusもコンパイルできます。

Scss（Sass）のコンパイル

mix.sass('src/app.scss', 'dist/');

Scssの設定方法です。上記はsrc/app.scssをdist/app.cssへコンパイルするコードです。
Scssのオプションはこのように設定できます。

mix
  .sass('src/app.scss', 'dist/', {
    sassOptions: {
      outputStyle: 'compressed'
    }
  })

また、PostCSSプラグインを追加することもできます。
よく使用するものといえばこのあたりでしょうか。

これらを使用する場合には、下記のように設定することで使用することができます。

mix.sass('src/app.scss', 'dist/')
  .options({
    postCss: [
      require('postcss-flexbugs-fixes')(),
      require('autoprefixer')({
        grid: true
      }),
    ],
  });

Lessのコンパイル

mix.less('src/app.scss', 'dist/');

Stylusのコンパイル

mix.stylus('src/app.scss', 'dist/');

PostCssのコンパイル

mix.postCss('src', 'output', [require('precss')()]);

その他、よく使用するもの

BrowserSync

mix.browserSync({
  files: 'dist/**/*',
  server: 'dist',
  proxy: false
})

BrowserSyncの設定方法です。上記はdistをドキュメントルートとし、dist配下のファイルが更新されたらブラウザがリロードされる設定です。

オプション	機能
`files`	ここで指定したファイルが更新されたら、BrowserSyncが動作する
`server`	ここで指定したパスがドキュメントルートとなり、BrowserSyncが起動する。 ※動的コンテンツは動作しない
`proxy`	ここで指定したドメインでBrowserSyncが起動する。

その他オプションはこちらから
https://browsersync.io/docs/options/

Typescript

mix.ts('src/app.ts', 'dist/app.js');

mix.js()をmix.ts()と変更するだけです。

React

mix.react('src/app.jsx', 'dist/app.js');

mix.js()をmix.react()と変更するだけです。

よく使うwebpack.mix.jsの設定サンプル

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

mix
  .js('src/app.js', 'dist/')
  .sass('src/app.scss', 'dist/')
  .browserSync({
    files: 'dist/**/*',
    server: 'dist',
    proxy: false
  });

webpack.mix.jsへ上記を記述するだけで、

JavaScriptのビルド
Scssのコンパイル
BrowserSyncの起動

が行えます。とても簡単。ステキですね。

コマンドを実行してみましょう

ファイル監視が行えるwatchコマンドを実行してみましょう。

npm run watch

ブラウザが起動してコンパイルが行われたら成功です。
開発中はnpm run watchでブラウザで随時確認しながらコーディングをし、サーバーへアップロードする時にはあらかじめnpm run prodでJSとCSSを圧縮してからアップロードすることで、Laravel Mixを効果的に使用することができます。

なお、下記のプラグインは初回起動時にインストールされ、package.jsonへ追加されます。

resolve-url-loader
sass
sass-loader
vue-template-compiler

さいごに

今回のサンプルファイルはこちらからダウンロードできます。
https://github.com/MasakiKojima/laravel-mix-sample

簡単に導入できますし、設定自体も簡単に行えますので、ぜひLaravel Mixをお試しください。