最終的にタスクランナーってLaravel mixでよくないか?

タスクランナーをいろいろ調べて、gulpとwebpackでやるのが今最善のやり方かなと思っていました。

しかし、世の中はもっと簡単になっていくものですね。

Laravelを使うようになってLaravel mixという便利なものに出会ったのです。

今回はLaravel mixという便利なものを紹介していきます。

Laravel mixとは?

簡単に言うとwebpackです。

しかし、webpackって設定ファイルが結構複雑で、嫌になってしまう人も多いと思います。

そんな人のために、設定ファイルをめちゃくちゃシンプルにさせたのがLaravel mixというわけですね。

webpackって何?

webpackを使ったことあれば説明するまでもありませんが、複数のjavascriptファイルを一つにまとめてくれます。

ライブラリの依存関係も解消してくれるので、scriptタグを順番に何個も読み込ませるようなことが不要になるのです。

現時点でモダンなコーディングは、jsライブラリはnpmを使ってインストールし、webpackで一つのファイルにまとめる(バンドルする)というやり方なのです。

従来のスクリプトを何個も読み込ませるような古いやり方をしているようでしたら、ぜひwebpackを利用してみてください。

Laravel mixならたった3行で設定完了

Laravel mixなら3行の設定ファイルで、jsのバンドルやsassのコンパルをやってくれます。

sassはautoprefixerはデフォルトでやってくれるっていうのも便利ですよね。

まずはインストール。

nnodeとnpmが入っているか確認します。

$ node -v
$ npm -v

入ってなかったらインストールしてね!

Laravelで使う場合はすでにpackage.jsonにいろいろ書いてあるので、npm installするだけです。

$ npm install

Laravelじゃない場合は、laravel mixをインストールします。

その他パッケージもインストールが必要なので、最低限のpackage.jsonはこんな感じですかね。

状況に応じでパッケージを追加してください。

{
  "name": "laravel-mix-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "hot": "NODE_ENV=development webpack-dev-server --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "production": "NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "cross-env": "^6.0.3",
    "laravel-mix": "^5.0.0",
    "resolve-url-loader": "^3.1.0",
    "sass": "^1.23.6",
    "sass-loader": "^8.0.0"
  }
}

laravel mixはlaravelを使わなくても使えるんです。

インストールができたらwebpack.mix.jsを作成しに以下の3行を書いておけばもうjsとsassのコンパイルはできるようになります。

const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');

scriptsに設定したコマンドでコンパイルが実行されます。

$ npm run dev
$ npm run watch
$ npm run production

正社員という奴隷制度に中指を立てるWebエンジニアです。PHPが得意。繋がれた鎖を断ち切るために、自由を取り戻すために、会社から独立するために、プログラミングスキルを磨く日々です。プログラミングと個人でもできるビジネスについて、情報発信しています。

詳しくはこちら