Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

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

Shohei Okada

June 21, 2017
Tweet

More Decks by Shohei Okada

Other Decks in Technology

Transcript

  1. Laravel Mix とは何なのか?
    @Laravel/Vue勉強会#1

    View Slide

  2. • 岡田 正平(おかだ しょうへい)
    • 株式会社ウィルゲートに15新卒入社
    • 主に PHP (Laravel) を使った社内システムの開発等
    • 最近読んだ本「何となくJavaScriptを書いていた人が
    一歩先に進むための本」
    2
    お ま え だ れ ?
    @okashoi

    View Slide

  3. • “一人ひとりの『will』を実現する”
    • コンテンツマーケティング事業/メディア事業
    3
    ウィルゲートについて

    View Slide

  4. 4
    ウィルゲートについて

    View Slide

  5. 5
    ウィルゲートについて

    View Slide

  6. Laravel Mix とは何なのか?

    View Slide

  7. • Laravel Mix とは何なのか 5分
    • 使い方
    • 準備編 2分
    • 実行編
    • Laravel Mix × Vue.js (DEMOあり) 3分
    7
    アジェンダ

    View Slide

  8. 8

    View Slide

  9. Laravel Mix provides a clean, fluent API for defining basic
    webpack build steps for your Laravel application.
    9
    Laravel Mix とは

    View Slide

  10. 10
    Laravel Mix とは
    Laravel Mix provides a clean, fluent API for defining basic
    webpack build steps for your Laravel application.

    View Slide

  11. • webpack の設定を容易に記述できる
    • Laravel 向けの
    • npm パッケージ
    11
    ようするに?

    View Slide

  12. • webpack の設定を容易に記述できる
    • Laravel 向けの
    • npm パッケージ
    12
    ようするに?

    View Slide

  13. • JavaScript をモジュール化
    • 依存関係解決
    • 読み込み用の単一のファイルを生成(ビルド)
    13
    webpack?

    View Slide

  14. webpack.mix.js
    14
    設定例(デフォルト)

    View Slide

  15. webpack.mix.js
    15
    設定例(デフォルト)
    ビルド済みファイル出力先
    ビルド元のソースコード

    View Slide

  16. • webpack の設定を容易に記述できる
    • Laravel 向けの
    • npm パッケージ
    16
    ようするに?

    View Slide

  17. • 確かに Laravel には向いている
    • どちらかというと Laravel 自体が Laravel に合わせて
    デフォルト設定を提供している様に読みとれる
    • Laravel 以外にも利用可能なのでは?(要検証)
    17
    Laravel向けの(?)

    View Slide

  18. • 確かに Laravel には向いている
    • どちらかというと Laravel 自体が Laravel に合わせて
    デフォルト設定を提供している様に読みとれる
    • Laravel 以外にも利用可能なのでは?(要検証)
    18
    Laravel向けの(?)

    View Slide

  19. • webpack の設定を容易に記述できる
    • Laravel 向けの(?)
    • npm パッケージ
    19
    ようするに?

    View Slide

  20. 20
    npm パッケージである
    (package.json)

    View Slide

  21. 21
    npm パッケージである
    (package.json)

    View Slide

  22. • webpack の設定を容易に記述できる
    • Laravel 向けの(?)
    • npm パッケージ
    22
    ようするに?

    View Slide

  23. • Laravel 5.3 以前は Laravel Elixir
    • Gulp ベース
    23
    ※補足

    View Slide

  24. 使い方(準備編)

    View Slide

  25. • npm
    • node package manager
    • PHP でいうところの composer に相当
    • yarn
    • npm 互換のパッケージマネージャー
    • facebook 製
    1. node / npm (yarn) をインストール

    View Slide

  26. https://yarnpkg.com/en/docs/install
    26
    1. node / npm (yarn) をインストール

    View Slide

  27. 27
    2. Laravel 5.4 プロジェクトを作成

    View Slide

  28. 28
    3. npm (yarn) install を実行

    View Slide

  29. 以上。

    View Slide

  30. 使い方(実行編)

    View Slide

  31. 31
    1. 下記コマンドを実行

    View Slide

  32. 32
    1. 下記コマンドを実行

    View Slide

  33. 以上。

    View Slide

  34. Laravel Mix × Vue.js

    View Slide

  35. 35
    resources/assets/js/app.js

    View Slide

  36. 36
    resources/assets/js/app.js

    View Slide

  37. resources/assets/js/components 下に .vue 形式で配置
    37
    カスタムコンポーネント
    (Example.vue)

    View Slide

  38. DEMO

    View Slide

  39. Laravel Mix とは
    • webpack の設定を容易に記述できる
    • Laravel 向けの(?)
    • npm パッケージ
    Laravel 5.4 プロジェクトを作成した時点で即利用可能!
    39
    まとめ

    View Slide