タスクランナーをいろいろ調べて、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 installLaravelじゃない場合は、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
コメント