Laravel Mix なら設定3行だけで webpack/Sass/JS のビルド環境ができました

Laravel Mix って？

Laravel Mix は PHPのフレームワーク Laravel に同梱されているビルドツールです。webpack をベースに作られていて、設定の記述量が少なく済むのが特徴。また、Laravel を使わないプロジェクトでも、Laravel Mix 単体でインストールして使うことができます。(Laravel 5.3までは Elixir という名前でした)

ということで、Laravel Mix 単体を使ったビルドをやってみます。内容としてはフロントエンドのみの案件を想定し、

JavaScript (ES6) のビルド
SCSSのビルド
Uglify
SourceMap出力
Watch
Browsersync によるライブリロード

これくらいで。
なんと、単純に CSSとJSのビルドをするだけなら、設定ファイルに書くのはわずか3行で済みます。上記の全部を入れても10行ほどです。

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

mix.js('src/scripts/app.js', 'public/assets/js')     // 1. JSのビルド
  .sass('src/styles/main.scss', 'public/assets/css') // 2. SCSSのビルド
  .sourceMaps(false)                                 // 4. SourceMap
  .browserSync({                                     // 6. Browsersync
    files: 'public/**/*',                            // (3.Uglify と 5.Watch は記述不要)
    server: 'public',
    proxy: false
  });

短い……！

全体のコードは GitHub にも置いています。
https://github.com/tipsnote/laravel-mix-sample

まずインストール

とりあえずインストールからはじめます。laravel-mix は node.js製ですので、npm を使って Laravel Mix と、Browsersync の webpack用プラグインを入れましょう。

npm install --save-dev laravel-mix browser-sync-webpack-plugin

ここは時間がかかりますね、待ちます。

JavaScript と CSS のビルド

設定は webpack.mix.js というファイルに書いていきます。JS と Sass をビルドしたいなら、前述のとおり3行で終わりです。こんな感じで入力ファイルと出力先ディレクトリを指定するだけ……！

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

mix.js('src/scripts/app.js', 'public/assets/js')
  .sass('src/styles/main.scss', 'public/assets/css');

これで、ターミナルから以下のコマンドを叩けば webpack によるビルドが行われます。

webpack --config=node_modules/laravel-mix/setup/webpack.config.js

以上で完了です。設定3行で JS と CSS のビルドができるようになりました。

ちょっとコマンドが、毎回入力するには長いですかね…？短く済ませる設定は後述します。

Uglify

「本番環境ではコードを Uglify させ、テスト環境では Uglify させない」という設定が Laravel Mix では最初から入っています。設定ファイルに記述する必要はなく、環境変数によって切り替える感じです。こちらもちょっとコマンドが長くなるので、package.json の "scripts" のところに以下のように記述しておきます。

  "scripts": {
    "dev":  "NODE_ENV=development webpack --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "NODE_ENV=production  webpack --config=node_modules/laravel-mix/setup/webpack.config.js"
  }

これで、ターミナルから npm run dev と叩けば開発環境としてのビルドとなり、Uglify はされません。npm run prod では本番環境としてのビルドとなり、Uglifyされます。

SourceMap を出力する

SourceMap を出力するための設定も用意されています。

mix.js('src/scripts/app.js', 'public/assets/js')
  .sass('src/styles/main.scss', 'public/assets/css')
  .sourceMaps(false);

こう webpack.mix.js に 1行足すだけです。引数は、本番ビルドで SourceMap を出力するかどうか。今回は false に設定し、開発環境でのみ SourceMap を出すようにしました。(デフォルトは true です)

Watch と Browsersync

ライブリロードのために Browsersync を使います。これもちょっと足すだけ。

mix.js('src/scripts/app.js', 'public/assets/js')
  .sass('src/styles/main.scss', 'public/assets/css')
  .sourceMaps(false)
  .browserSync({
    files: 'public/**/*',
    server: 'public',
    proxy: false
  });

Browsersync の引数として files オプションで監視対象を、server オプションでルートディレクトリを指定。私の環境では、server を指定する場合は明示的に proxy に false を設定する必要があるようでした。

これで、webpack に --watch オプションをつけて叩けば OK です。package.json に "watch" タスクを追加しておき、

  "scripts": {
    "dev":   "NODE_ENV=development webpack --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "NODE_ENV=development webpack --config=node_modules/laravel-mix/setup/webpack.config.js --watch",
    "prod":  "NODE_ENV=production  webpack --config=node_modules/laravel-mix/setup/webpack.config.js"
  }

npm run watch でビルドと Watch, Browsersync起動までできるようになりました。