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

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