gulpやめてLaravel Mixはじめた話

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

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
    .JY
    QSPWJEFT
    B
    qVFOU
    "1*
    GPS
    EFpOJOH
    8FCQBDL
    CVJME
    TUFQT
    GPS
    ZPVS
    -BSBWFM
    BQQMJDBUJPO
    VTJOH
    TFWFSBM
    DPNNPO
    $44
    BOE
    +BWB4DSJQU
    QSFQSPDFTTPST
    IUUQTMBSBWFMDPNEPDTNJYJOUSPEVDUJPO
    Laravel Mix͸ଟ͘ͷҰൠతͳCSSͱJavaScriptͷϓϦϓϩηοαΛ࢖༻ ͠ɺLaravelΞϓϦέʔγϣϯͨΊʹɺWebpackͰͷϏϧυΛ؆୯ʹఆ ٛͰ͖ΔAPIΛఏڙ͍ͯ͠·͢ɻ
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ʣ 
    CSFX
    JOTUBMM
    DPNQPTFS 
    DPNQPTFS
    DSFBUFQSPKFDU
    QSFGFSEJTU
    MBSBWFMMBSBWFM
    <QSPKFDUOBNF> Laravel͸ύοέʔδ؅ཧʹcomposerΛ࢖͏ͷͰΠϯετʔϧ composerΛ࢖͍ɺLaravelΛΠϯετʔϧ͢Δ
18. Laravel MixͷಋೖʢLaravelʣ npmύοέʔδΛΠϯετʔϧ 
    OQN
    JOTUBMM 
    OQN
    SVO
    XBUDI ର৅ϑΝΠϧΛ؂ࢹ͠มߋ͕͋Ε͹มߋͷ͋ͬͨϑΝΠϧΛίϯύΠϧ
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ͷಋೖ 
    OQN
    JOTUBMM 
    OQN
    SVO
    XBUDI 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ͷಋೖ 
    OQN
    JOTUBMM
    %
    SFBDU
    SFBDUEPN 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
41. ιʔεϚοϓͷಋೖ NJYTPVSDF.BQT ιʔεϚοϓΛCSSͱJavaScriptʹදࣔ͠·͢ CSSͷιʔεϚοϓʹόά͕͋Γɺ௥ه͕ඞཁ NJYXFCQBDL$POpH \
    EFWUPPM
    JOMJOFTPVSDFNBQ
    ^ 
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
45. Q Browsersync͕࢖͍͍ͨ
46. A ύοέʔδΛΠϯετʔϧͯ͠ webpack.mix.jsʹ௥ه͠·͠ΐ͏
47. Browsersyncͷಋೖ 
    OQN
    JOTUBMM
    %
    CSPXTFSTZOD
    CSPXTFSTZODXFCQBDLQMVHJO 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. ͋Γ͕ͱ͏͍͟͝·ͨ͠