Help us understand the problem. What is going on with this article?

laravel-mix調査の備忘録

概要

Laravel-Mix調査で知らない単語がたくさん出てきたのでそれのメモ。
そもそもLaravel-Mixなんで使うの?って理由ですが

  • 複数のjsファイルを一つにバンドルしたい
  • キャッシュが原因でjs, cssの変更が反映されない問題を解決したい
  • npmコマンド叩きたい(今の主流はyarnらしいですが...)

上記のような理由です。

参照ページ

Laravel Mixとは

Laravel 公式ドキュメントより

Laravel Mixは多くの一般的なCSSとJavaScriptのプリプロセッサを使用し、Laravelアプリケーションために、構築過程をwebpackでスラスラと定義できるAPIを提供しています。シンプルなメソッドチェーンを使用しているため、アセットパイプラインを流暢に定義できます。例を見てください。

全然わからん。こちとらwebpackが何者なのかすら理解できていない。
色々調べたが大体こんな感じ。

  1. webpack君は複数ファイルを一つにまとめてくれるモジュールバンドラツール
  2. webpack君をそのまま使うのはダルい
  3. Laravel Mixを使うと簡単に書ける

完全に理解した。

browserSyncとは

コードを変更、保存したら自動でブラウザを更新してくれる賢いヤツ。
Laravel-Mixだと簡単に書ける。

mix.browserSync({
    proxy: '192.168.99.100',
    open: false, // ブラウザを自動で開かない
    files: [ // 監視対象のファイル
        'resources/**/*',
    ],
    watchOptions: {
        usePolling: true,
        interval: 500,
      },
    })

自前のdocker環境用の書き方だけどざっくりこんな感じです。
resources配下のファイルを変更した際に画面が自動reloadされます。
bladeの変更がリロードなしで即反映されるので開発が捗る捗る。

UglifyJSとは

JavaScriptのコードを圧縮、軽量化(minify)したり難読化するためのツールです。
Laravel-mixの場合、コマンドによってminifyされるか否かが決まります。

npm run dev ⇒ minifyされない
npm run prod ⇒ minifyされる

    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    }
tyoromatu4423
東京在住。職業エンジニア
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした