Readouble

Laravel 11.x Laravel Mix

イントロダクションIntroduction

Laravel Mix は、Laracasts を作った、Jeffrey Wayが開発したパッケージで、Laravelアプリケーションのため、一般的なCSSとJavaScriptプリプロセッサを使い、webpackビルド手順を定義する流暢なAPIを提供するものです。Laravel Mix[https://github.com/laravel-mix/laravel-mix], a package developed by Laracasts[https://laracasts.com] creator Jeffrey Way, provides a fluent API for defining webpack[https://webpack.js.org] build steps for your Laravel application using several common CSS and JavaScript pre-processors.

言い換えると、Mixを使用すると、アプリケーションのCSSファイルとJavaScriptファイルを簡単にコンパイルして圧縮できます。シンプルなメソッドチェーンにより、アセットパイプラインを流暢に定義できます。例をご覧ください。In other words, Mix makes it a cinch to compile and minify your application's CSS and JavaScript files. Through simple method chaining, you can fluently define your asset pipeline. For example:

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css');

Webpackとアセットのコンパイルを使い始めようとして混乱し圧倒されたことがある方は、Laravel Mixを気に入ってくれるでしょう。ただし、アプリケーションの開発に必ず使用する必要はありません。お好きなアセットパイプラインツールを使用するも、まったく使用しないのも自由です。If you've ever been confused and overwhelmed about getting started with webpack and asset compilation, you will love Laravel Mix. However, you are not required to use it while developing your application; you are free to use any asset pipeline tool you wish, or even none at all.

lightbulb Note: 新しいLaravelのインストールから、Laravel MixをViteへ置き換えました。Mixのドキュメントは、公式Laravel Mixのウェブサイトをご覧ください。Viteへ切り替える場合は、Vite移行ガイドを参照してください。[!NOTE]
Vite has replaced Laravel Mix in new Laravel installations. For Mix documentation, please visit the official Laravel Mix[https://laravel-mix.com/] website. If you would like to switch to Vite, please see our Vite migration guide[https://github.com/laravel/vite-plugin/blob/main/UPGRADE.md#migrating-from-laravel-mix-to-vite].

章選択

設定

明暗テーマ
light_mode
dark_mode
brightness_auto システム設定に合わせる
テーマ選択
photo_size_select_actual デフォルト
photo_size_select_actual モノクローム(白黒)
photo_size_select_actual Solarized風
photo_size_select_actual GitHub風(青ベース)
photo_size_select_actual Viva(黄緑ベース)
photo_size_select_actual Happy(紫ベース)
photo_size_select_actual Mint(緑ベース)
コードハイライトテーマ選択

明暗テーマごとに、コードハイライトのテーマを指定できます。

テーマ配色確認
スクリーン表示幅
640px
80%
90%
100%

768px以上の幅があるときのドキュメント部分表示幅です。

インデント
無し
1rem
2rem
3rem
原文確認
原文を全行表示
原文を一行ずつ表示
使用しない

※ 段落末のEボタンへカーソルオンで原文をPopupします。

Diff表示形式
色分けのみで区別
行頭の±で区別
削除線と追記で区別

※ [tl!…]形式の挿入削除行の表示形式です。

テストコード表示
両コード表示
Pestのみ表示
PHPUnitのみ表示
OS表示
全OS表示
macOSのみ表示
windowsのみ表示
linuxのみ表示
和文変換

対象文字列と置換文字列を半角スペースで区切ってください。(最大5組各10文字まで)

本文フォント

総称名以外はCSSと同様に、"〜"でエスケープしてください。

コードフォント

総称名以外はCSSと同様に、"〜"でエスケープしてください。

保存内容リセット

localStrageに保存してある設定項目をすべて削除し、デフォルト状態へ戻します。

ヘッダー項目移動

キーボード操作