Laravel/Vue 勉強会#1 の発表資料です。 https://connpass.com/event/58157/

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
まとめ