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

gulpやめてLaravel Mixはじめた話

2d1275668d7b6a47d4e29415994313b8?s=47 井上拓
January 19, 2019

gulpやめてLaravel Mixはじめた話

2019年 特別回「WEB TOUCH MEETING+ Adobe XD」のLT資料

2d1275668d7b6a47d4e29415994313b8?s=128

井上拓

January 19, 2019
Tweet

More Decks by 井上拓

Other Decks in Programming

Transcript

  1. 201 2019೥ ಛผճʮWEB TOUCH MEETINGʴ Adobe XDʯ gulp΍ΊͯLaravel Mix͸͡Ίͨ࿩

  2. 201 2019೥ ಛผճʮWEB TOUCH MEETINGʴ Adobe XDʯ gulp΍ΊͯLaravel Mix͸͡Ίͨ࿩

  3. Q ·ͩϏϧυπʔϧͰ ফ໣ͯ͠Δͷʁ

  4. A ͯ͠·͢

  5. Ϗϧυπʔϧͷมભ

  6. Ϗϧυπʔϧͷมભ

  7. Q ͳΜͰgulp΍Ίͨͷʁ

  8. A ܧ͗଍͠ܧ͗଍͠Ͱൿ఻ͷλϨΈ͍ͨʹͳ͔ͬͨΒ ࣮͸࢖ΘΕͯͳ͍λεΫ΋Ұॹʹಈ͍ͯΔ

  9. Q ͳΜͰLaravel Mixʹͨ͠ͷʁ

  10. A ϝΠϯͷϑϨʔϜϫʔΫ͕ FuelPHP͔ΒLaravelʹ มΘ͔ͬͨΒ

  11. ͦ΋ͦ΋Laravel Mixͱ͸ʁ -BSBWFM.JYQSPWJEFTBqVFOU"1*GPSEFpOJOH8FCQBDLCVJMETUFQTGPSZPVS-BSBWFM BQQMJDBUJPOVTJOHTFWFSBMDPNNPO$44BOE+BWB4DSJQUQSFQSPDFTTPST IUUQTMBSBWFMDPNEPDTNJYJOUSPEVDUJPO Laravel Mix͸ଟ͘ͷҰൠతͳCSSͱJavaScriptͷϓϦϓϩηοαΛ࢖༻ ͠ɺLaravelΞϓϦέʔγϣϯͨΊʹɺWebpackͰͷϏϧυΛ؆୯ʹఆ ٛͰ͖ΔAPIΛఏڙ͍ͯ͠·͢ɻ

  12. None
  13. Q webpackͰ͍͍͡Όͳ͍ͷʁ

  14. A ʮεϥεϥͱఆٛͰ͖Δʯ͕ϛι

  15. const mix = require('laravel-mix'); mix.js('resources/js/app.js', 'public/js') .sass('resources/sass/app.scss', 'public/css'); XFCQBDLNJYKT

  16. Laravel mixͷಋೖ

  17. Laravel MixͷಋೖʢLaravelʣ CSFXJOTUBMMDPNQPTFS DPNQPTFSDSFBUFQSPKFDUQSFGFSEJTUMBSBWFMMBSBWFM<QSPKFDUOBNF> Laravel͸ύοέʔδ؅ཧʹcomposerΛ࢖͏ͷͰΠϯετʔϧ composerΛ࢖͍ɺLaravelΛΠϯετʔϧ͢Δ

  18. Laravel MixͷಋೖʢLaravelʣ npmύοέʔδΛΠϯετʔϧ OQNJOTUBMM OQNSVOXBUDI ର৅ϑΝΠϧΛ؂ࢹ͠มߋ͕͋Ε͹มߋͷ͋ͬͨϑΝΠϧΛίϯύΠϧ

  19. Q Laravel࢖Θͳ͍࣌΋ Πϯετʔϧ͠ͳ͍ͱ͍͚ͳ͍ͷʁ

  20. A ΋ͪΖΜLaravel Mix୯ମͰಈ࡞͠·͢

  21. https://github.com/JeffreyWay/laravel-mix

  22. Laravel Mixʹඞཁͳ΋ͷ MT BQQ   OPEF@NPEVMFT  SPVUFT BSUJTBO

      QBDLBHFMPDLKTPO TFSWFSQIQ CPPUTUSBQ  QBDLBHFKTPO  TUPSBHF DPNQPTFSKTPO QIQVOJUYNM  UFTUT DPNQPTFSMPDL QVCMJD  WFOEPS DPOpH  SFBENFNE  XFCQBDLNJYKT EBUBCBTF SFTPVSDFT
  23. A ඞཁͳͷ͸ package.jsonͱwebpack.mix.js͚ͩ

  24. { "private": true, "scripts": { "dev": "npm run development", "development":

    "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js -- progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", "watch": "npm run development -- --watch", "watch-poll": "npm run watch -- --watch-poll", "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack- dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js", "prod": "npm run production", "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no- progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js" }, "devDependencies": { "axios": "^0.18", "bootstrap": "^4.0.0", "cross-env": "^5.1", "jquery": "^3.2", "laravel-mix": "^4.0.7", "lodash": "^4.17.5", "popper.js": "^1.12", "resolve-url-loader": "^2.3.1", "sass": "^1.15.2", "sass-loader": "^7.1.0", "vue": "^2.5.17", "vue-template-compiler": "^2.5.22" } } QBDLBHFKTPO
  25. const mix = require('laravel-mix'); mix.js('resources/js/app.js', 'public/js') .sass('resources/sass/app.scss', 'public/css'); XFCQBDLNJYKT

  26. Laravel Mixͷಋೖ OQNJOTUBMM OQNSVOXBUDI package.jsonͱwebpack.mix.jsΛ࣋ͬͯ͘Δ͚ͩͰ͙͢ʹ࢝ΊΒΕ· ͢ɻ

  27. Q ͜Ε͚ͩ͡Ό଍Γͳ͍ JavaScript͸Vue.jsͰॻ͖͍ͨ

  28. A webpack.mix.jsʹ௥ه͠·͠ΐ͏

  29. const mix = require('laravel-mix'); mix.vue('resources/js/app.js', 'public/js') .sass('resources/sass/app.scss', 'public/css'); XFCQBDLNJYKT

  30. { "private": true, "scripts": { ~~ུ~~ }, "devDependencies": { "axios":

    "^0.18", "bootstrap": "^4.0.0", "cross-env": "^5.1", "jquery": "^3.2", "laravel-mix": "^4.0.7", "lodash": "^4.17.5", "popper.js": "^1.12", "resolve-url-loader": "^2.3.1", "sass": "^1.15.2", "sass-loader": "^7.1.0", "vue": "^2.5.17", "vue-template-compiler": "^2.5.22" } } QBDLBHFKTPO
  31. A Laravel͸Vue.jsਪ͠Β͍͠

  32. Q ReactͰॻ͖͍ͨ

  33. A ύοέʔδΛΠϯετʔϧͯ͠ webpack.mix.jsʹ௥ه͠·͠ΐ͏

  34. Browsersyncͷಋೖ OQNJOTUBMM%SFBDUSFBDUEPN Reactຊମͱɺreact-domΛΠϯετʔϧ͠·͢ɻ

  35. const mix = require('laravel-mix'); mix.react('resources/js/app.js', 'public/js') .sass('resources/sass/app.scss', 'public/css'); XFCQBDLNJYKT

  36. Q ιʔεϚοϓ͕࢖͍͍ͨ

  37. A ؆୯ʹͰ͖·͢ ʢόά͋Γʣ

  38. const mix = require('laravel-mix'); mix.js('resources/js/app.js', 'public/js') .sass('resources/sass/app.scss', 'public/css') .sourceMaps(); XFCQBDLNJYKT

  39. None
  40. None
  41. ιʔεϚοϓͷಋೖ NJYTPVSDF.BQT ιʔεϚοϓΛCSSͱJavaScriptʹදࣔ͠·͢ CSSͷιʔεϚοϓʹόά͕͋Γɺ௥ه͕ඞཁ NJYXFCQBDL$POpH \EFWUPPMJOMJOFTPVSDFNBQ^ 

  42. const mix = require('laravel-mix'); mix.js('resources/js/app.js', 'public/js') .sass('resources/sass/app.scss', 'public/css') .sourceMaps(); mix.webpackConfig({

    devtool: "inline-source-map" }); XFCQBDLNJYKT
  43. None
  44. None
  45. Q Browsersync͕࢖͍͍ͨ

  46. A ύοέʔδΛΠϯετʔϧͯ͠ webpack.mix.jsʹ௥ه͠·͠ΐ͏

  47. Browsersyncͷಋೖ OQNJOTUBMM%CSPXTFSTZODCSPXTFSTZODXFCQBDLQMVHJO BroesersyncຊମͱɺWebpack༻ͷϓϥάΠϯΛΠϯετʔϧ͠·͢ɻ

  48. const mix = require('laravel-mix'); mix.vue('resources/js/app.js', 'public/js') .sass('resources/sass/app.scss', 'public/css'); mix.browserSync({ server:

    'public', proxy: false, files: [ 'public/**/*.html', 'public/js/*.js', 'public/css/*.css', ] }) XFCQBDLNJYKT
  49. ·ͱΊ

  50. ·ͱΊ • ಋೖ͕؆୯ • ઃఆ΋؆୯ʹॻ͚Δ • webpackʹͰ͖Δ͜ͱ͸ɺLaravel mixͰ΋Ͱ͖Δ • ιʔεϚοϓʹ͸গ͠όά͕͋ΔͷͰ஫ҙ

  51. ೥݄೔ ʙ ޿ౡϑϩϯτΤϯυษڧձ7PM ʰ-BSBWFM.JYͰ͸͡ΊΔXFCQBDLʱ Ϧʔυεϖʔεגࣜձࣾ ޿ౡݝ޿ౡࢢத্۠ീஸງϐϩςΟʔώϩγϚ' IUUQTIJSPGVSPPSH

  52. ͋Γ͕ͱ͏͍͟͝·ͨ͠