Laravel Mix とは何なのか？ - Laravel/Vue 勉強会 #1

Laravel/Vue 勉強会 #1 の発表資料です。

https://connpass.com/event/58157/

Transcript

1. Laravel Mix とは何なのか？ @Laravel/Vue勉強会#1
2. • 岡田 正平（おかだ しょうへい） • 株式会社ウィルゲートに15新卒入社 • 主に PHP (Laravel) を使った社内システムの開発等 • 最近読んだ本「何となくJavaScriptを書いていた人が 一歩先に進むための本」 2 お ま え だ れ ？ @okashoi
3. • “一人ひとりの『will』を実現する” • コンテンツマーケティング事業／メディア事業 3 ウィルゲートについて
4. 4 ウィルゲートについて
5. 5 ウィルゲートについて
6. Laravel Mix とは何なのか？
7. • Laravel Mix とは何なのか 5分 • 使い方 • 準備編 2分 • 実行編 • Laravel Mix × Vue.js （DEMOあり） 3分 7 アジェンダ
8. 8
9. Laravel Mix provides a clean, fluent API for defining basic webpack build steps for your Laravel application. 9 Laravel Mix とは
10. 10 Laravel Mix とは Laravel Mix provides a clean, fluent API for defining basic webpack build steps for your Laravel application.
11. • webpack の設定を容易に記述できる • Laravel 向けの • npm パッケージ 11 ようするに？
12. • webpack の設定を容易に記述できる • Laravel 向けの • npm パッケージ 12 ようするに？
13. • JavaScript をモジュール化 • 依存関係解決 • 読み込み用の単一のファイルを生成（ビルド） 13 webpack?
14. webpack.mix.js 14 設定例（デフォルト）
15. webpack.mix.js 15 設定例（デフォルト） ビルド済みファイル出力先 ビルド元のソースコード
16. • webpack の設定を容易に記述できる • Laravel 向けの • npm パッケージ 16 ようするに？
17. • 確かに Laravel には向いている • どちらかというと Laravel 自体が Laravel に合わせて デフォルト設定を提供している様に読みとれる • Laravel 以外にも利用可能なのでは？（要検証） 17 Laravel向けの（？）
18. • 確かに Laravel には向いている • どちらかというと Laravel 自体が Laravel に合わせて デフォルト設定を提供している様に読みとれる • Laravel 以外にも利用可能なのでは？（要検証） 18 Laravel向けの（？）
19. • webpack の設定を容易に記述できる • Laravel 向けの（？） • npm パッケージ 19 ようするに？
20. 20 npm パッケージである (package.json)
21. 21 npm パッケージである (package.json)
22. • webpack の設定を容易に記述できる • Laravel 向けの（？） • npm パッケージ 22 ようするに？
23. • Laravel 5.3 以前は Laravel Elixir • Gulp ベース 23 ※補足
24. 使い方（準備編）
25. • npm • node package manager • PHP でいうところの composer に相当 • yarn • npm 互換のパッケージマネージャー • facebook 製 1. node / npm (yarn) をインストール
26. https://yarnpkg.com/en/docs/install 26 1. node / npm (yarn) をインストール
27. 27 2. Laravel 5.4 プロジェクトを作成
28. 28 3. npm (yarn) install を実行
29. 以上。
30. 使い方（実行編）
31. 31 1. 下記コマンドを実行
32. 32 1. 下記コマンドを実行
33. 以上。
34. Laravel Mix × Vue.js
35. 35 resources/assets/js/app.js
36. 36 resources/assets/js/app.js
37. resources/assets/js/components 下に .vue 形式で配置 37 カスタムコンポーネント (Example.vue)
38. DEMO
39. Laravel Mix とは • webpack の設定を容易に記述できる • Laravel 向けの（？） • npm パッケージ Laravel 5.4 プロジェクトを作成した時点で即利用可能！ 39 まとめ