Laravel Mixを使って簡単にフロントエンド開発環境を構築する方法

こんにちは、アートディレクターの奥田です。
先日、日本列島を襲った台風21号、皆様は大丈夫でしたでしょうか？

僕は幸い家は無事でしたが26時間停電し、マンションのテレビのアンテナが壊れ10日間テレビのない生活を強いられました。
普段はニュースや録画したアニメを観る程度なのですが、いざ観られないとなると逆に気になるものですね。
北海道地震も含め、もっと大変な思いをされた方もいらっしゃると思います。
一日も早い復興と、皆様が日常の生活に戻れるよう、お祈り致します。

さて、ここ数年のフロントエンド界隈の発展は目覚ましく、わりとカオスな状況になっているとよく言われていますね。
現在はビルドツールに関してはWebpackが主流なのではないでしょうか。（また変わってくる可能性は大いにありますが・・・）
ただ、Webpackは設定ファイルの書き方が特殊でなかなか一筋縄ではいかないのが現状です。

僕がよく使うPHPのフレームワーク「Laravel」に同梱されている「Laravel Mix」を使えば複雑な設定はそれほどなく、簡単に開発環境を構築する事が可能です。
更にスタンドアローンで構築が可能なため、Laravelを使用しない場合でも使えるという優れものです。
今回はそんなLaravel Mixを使って簡単にフロントエンド開発環境を構築する方法をご紹介いたします。

Laravel Mixとは?
インストール
package.jsonの編集
webpack.mix.jsファイルの作成
ライブラリを使う
さいごに

Laravel Mixとは?

Laravel Mix は PHPのフレームワーク Laravel に同梱されているビルドツールです。
Webpackをベースに構成されており、シンプルなメソッドチェーンを使用しているため、アセットパイプラインを流暢に定義できます。
また、Laravelでの使用だけでなく、スタンドアローンでの使用が可能なので手軽にフロントエンド開発環境を構築する事が可能です。
以前は Elixir という名前でしたがLaravel5.4 から名称が変更されました。

インストール

Laravel Mixを使用するにはNode.jsとNPMが必須です。
下記コマンドを実行し、バージョン情報が表示されない場合はインストールしましょう。

$ node -v
$ npm -v

では作業ディレクトリに移動しLaravel Mixをインストールします。
ついでにbrowser-syncのWebpackプラグインもインストールします。

$ mkdir laravel-mix
$ cd laravel-mix/
$ npm install --save-dev laravel-mix browser-sync-webpack-plugin

インストールが完了するまでしばし待ちます。
作業ディレクトリ内にnode_modulesディレクトリができその中に必要なパッケージがすべてインストールされます。

package.jsonの編集

Laravelには標準でNPMの設定ファイル（package.json）が同梱されていますが今回はLaravel外での作業となるので手動で作成します。
package.jsonファイルのscriptsの中を以下のように記述します。

// package.json
{
    "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"
    },
    "devDependencies": {
        "browser-sync-webpack-plugin": "^2.0.1"
    },
    "dependencies": {
        "laravel-mix": "^2.1.11"
    }
}

scriptsを3パターン作成しています。

npm run dev

と実行すればUglifyされてないテスト環境としてのビルドとなります。

npm run prod

と実行すればUglifyされている本番環境としてのビルドとなります。
またファイルの変更を監視させたい場合は以下のコマンドを実行します。

npm run watch

これは余談ですがいちいち長いコマンドを打つのが面倒な場合はscriptsの箇所を短く”d”、”w”、”p”という具合にして “npm run d” や “npm run w” など短いコマンドにするといいと思います。

webpack.mix.jsファイルの作成

Laravel Mixの設定ファイルはwebpack.mix.jsというファイルになります。
今回は./src/内のアセットファイルを./public/内にビルドする設定を例にしています。
mix.jsでJavaScriptのビルドの設定、mix.sassでSassの設定を記述しています。
Laravel Mixはその他にもLessやStylus、PostCSSにも対応しています。

const mix = require('laravel-mix');
    
    mix.setResourceRoot('');
    mix.js('src/js/app.js', 'public/js/')
    .sass('src/sass/app.scss', 'public/css/')
    .browserSync({
        files: './**/*',
        server: './public/',
        proxy: false
    });

Laravel Mixは標準でスタイルシート内のurl()の呼び出しをリライトし、最適化する機能が存在します。
processCssUrls: falseというオプションを指定することでこれを回避することができます。

例えば以下のようにデフォルト動作として、Laravel MixとWebpackがexample.pngを見つけると、それをpublic/imagesフォルダへコピーします。それから、生成したスタイルシート中のurl()を書き換えます。

.example {
    background: url('../images/example.png');
}

.example {
  background: url(/images/example.png?d41d8cd98f00b204e9800998ecf8427e);
}

ただ、この機能は環境によっては必要のない機能となりますので以下のようにすることで停止する事が可能です。

mix.sass('src/sass/app.scss', 'public/css/')
.options({
    processCssUrls: false
})

ライブラリを使う

jQueryやVueなどのライブラリを使用したい場合はまず、NPMでインストールします。

$ npm install jquery --save
$ npm install vue --save

以下のようにautoloadに記述しておくことで使用可能です。

mix.js('src/js/app.js', 'public/js/')
.autoload({
  "jquery": ['$', 'window.jQuery'],
  "vue": ['Vue', 'window.Vue']
})

さいごに

いかがだったでしょうか。

今回構成したサンプルを公開しております。
ご参考にしてください。

Laravel Mix Sample

Webpackをそのまま使おうとするとかなり骨が折れるのですが、Laravel Mixを使えば簡単に開発環境の構築が可能です。
僕はクライアントワークでのWeb制作ではまだまだgulp + Webpackの併用なのですが、システム開発などでLaravelを使う際はLaravel Mixを使用しています。
みなさんも是非Laravel Mixを試してみてください。

ウィルスタイル株式会社 / Will Style Inc.

Blog スタッフブログ