Site icon Tips Note by TAM

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

matsuo

Laravel Mix って？

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

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

  1. JavaScript (ES6) のビルド
  2. SCSSのビルド
  3. Uglify
  4. SourceMap出力
  5. Watch
  6. 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起動までできるようになりました。

以上です

ほんとに数行の設定で、さくっと使えるフロントエンドのビルド環境ができあがります。Laravel Mix には他にも Vue.js や PostCSS 対応、ビルドファイルのバージョン化機能などもありますので、Laravel を使わないフロントエンド寄りの方もチェックしてみると面白いかと思います。

参考