Front-end Build Tools - JTF2014 Tokyo

「フロントエンドで普及が進むビルドツールたち」
インフラエンジニアの祭典「July Tech Festa 2014」でフロントエンドの自動化の話をしてきました。(まだ6月だけど)
http://2014.techfesta.jp/

Transcript

1. ! facebook.com/cognitom Տଜ
   ঑ ϑϩϯτΤϯυͰීٴ͕ਐΉ
   Ϗϧυπʔϧͨͪ (SVOUɺHVMQ
   ΄͔
2. + + ৭ʑ
3. ओʹɺΧϑΣͷ
   ϚελʔͰ͢ɻ 執筆/教育 マスター デザイン 開発 成分表
4. ϑϧελοΫͳ
   ΤϯδχΞʹͳΔ΂͘ɺ
5. ໺ࡊ޻৔͸͡Ί·ͨ͠ɻ
6. ͢Έ·ͤΜɺ੝Γ͗͢·ͨ͠ɻ
7. ଟॏԽɾ৑௕ԽΛࢹ໺ʹ
8. ͱΓ͋͑ͣɺൃժΛ଴͍ͬͯ·͢ɻ
9. ຊ୊Ͱ͢ɻ
10. ΠϯϑϥΤϯδχΞͷͨΊͷ
    ڭཆՊ໨
11. wϑϩϯτΤϯυ੍࡞ͷʮࠓʯ
    wϏϧυπʔϧͷมભ
    wαʔόɺΫϥΠΞϯτɺͦͯ͠ୈࡾۃ ϑϩϯτΤϯυͰීٴ͕ਐΉ
    Ϗϧυπʔϧͨͪ
12. ϑϩϯτΤϯυπʔϧͷʮࠓʯ
13. σϞ
14. HVMQ
15. #SPXTXF4ZODͷσϞ
16. *MMVTUSBUPS
    
    ϑΝΠϧ؂ࢹͷσϞ
17. (SVOU
    ঺հ ʮάϥϯτ
    HSⓟOU ʯͱൃԻɻ
    ϑϩϯτΤϯυ੍࡞Ͱඞཁʹͳͬͨɺ
    ͋Ε΍͜ΕͷࣗಈԽΛ͢ΔͨΊͷɺ
    λεΫϥϯφʔɻ͋Δ͍͸ɺϏϧυπʔϧɻ
    ϑϩϯτΤϯυͷࣗಈԽͷཱ໾ऀɻ
18. (SVOUͷΠϯετʔϧͱ࣮ߦ $ grunt! $ grunt task_name ϓϩδΣΫτͷσΟϨΫτϦͰʜ $ npm install -g gulp-cli /PEFKT͕ඞཁɻάϩʔόϧʹΠϯετʔϧɻ
19. gulp.task 'sass', -> gulp.src 'app/styles/**/*.scss' .pipe sass() .pipe autoprefixer 'last 1 version' .pipe gulp.dest ‘dist/styles' ! gulp.task 'default', ['sass'] -> gulp.watch 'app/styles/**/*.scss', ['sass'] grunt.initConfig sass: dist: files: [ cwd: 'app/styles' src: '**/*.scss' dest: '../.tmp/styles' expand: true ext: '.css' ] autoprefixer: options: ['last 1 version'] dist: files: [ expand: true cwd: '.tmp/styles' src: '{,*/}*.css' dest: 'dist/styles ] watch: styles: files: ['app/styles/{,*/}*.scss'] tasks: ['sass:dist', ‘autoprefixer:dist'] ! grunt.registerTask 'default', ['styles', 'watch']
20. 8FC
    'VOEBNFOUBMT CZ
    (PPHMF
    !  ϚϧνσόΠεରԠͷ
 ελʔλʔΩοτ
     λεΫϥϯφʔʹHVMQΛ࠾༻
21. ͜Ε͔Β࢝ΊΔͳΒɺHVMQͰ ৽͠໨ͷϓϩδΣΫτ͸HVMQΛ࠾༻
    JO
    (JU)VC
    طଘϓϩδΣΫτ΋Ҡߦ͕࢝·͍ͬͯΔ
    ! ˞ͨͩ͠ɺϫʔΫϑϩʔ͕ݻ·ͬͯ͠·ͬͨ
    ɹ੍࡞ݱ৔Ͱ͸ɺࠓޙ΋౰໘(SVOU͕࢖ΘΕΔ
22. HVMQೖ໳ ʮΨϧϓ
    HⓟMQ ʯͱൃԻɻ
    ϑϩϯτΤϯυ੍࡞Ͱඞཁʹͳͬͨɺ
    ͋Ε΍͜ΕͷࣗಈԽΛ͢ΔͨΊͷɺ
    λεΫϥϯφʔɻ͋Δ͍͸ɺϏϧυπʔϧɻ
23. HVMQͷΠϯετʔϧ $ npm install -g gulp /PEFKT͕ඞཁɻάϩʔόϧʹΠϯετʔϧɻ
24. QBDLBHFKTPO
25. HVMQpMFDPGGFF
26. HVMQͷ࣮ߦ $ gulp! $ gulp task_name! $ gulp task1 task2 task3 … ϓϩδΣΫτͷσΟϨΫτϦͰʜ
27. uglify coffee gulp.dest gulp.src gulp = require 'gulp' coffee = require 'gulp-coffee' uglify = require 'gulp-uglify' gulp.task 'js', -> gulp.src './js/src/*.coffee' .pipe coffee() .pipe uglify() .pipe gulp.dest ‘./js/‘ gulp.task 'watch', -> gulp.watch './js/src/*.coffee', ['js'] Single Dest & Watch ग़ྗઌͭ
    
    ؂ࢹ
28. ग़ྗઌ͕ෳ਺ gulp.dest autoprexier minify-css rename gulp.dest gulp.src gulp = require 'gulp' autoprefixer = require 'gulp-autoprefixer' minifyCss = require 'gulp-minify-css' rename = require 'gulp-rename' gulp.task 'css', -> gulp.src './css/src/style.css' .pipe autoprefixer 'last 2 versions' .pipe gulp.dest ‘./css/‘ .pipe minifyCss() .pipe rename extname: '.min.css' .pipe gulp.dest ‘./css/‘ Multi Dest
29. มߋՕॴΛݟͯϏϧυ cached uglify concat remember gulp.dest gulp.src gulp = require 'gulp' cached = require 'gulp-cached' uglify = require 'gulp-uglify' remember = require 'gulp-remember' concat = require 'gulp-concat' gulp.task ‘script’, -> gulp.src './js/src/*.js' .pipe cached() .pipe uglify() .pipe remember() .pipe concat 'app.js' .pipe gulp.dest ‘./js/‘ Incremental Rebuilding changed uglify gulp.dest gulp.src gulp = require 'gulp' changed = require 'gulp-changed' uglify = require 'gulp-uglify' gulp.task 'script', -> gulp.src './src/*.js' .pipe changed './dist/' .pipe uglify() .pipe gulp.dest './dist/' Only Changed
30. data = apple: title: 'Apple Cake' attrs: some_data orange: title: 'Orange Cookie' attrs: some_data gulp.task 'page', -> es.concat.apply null, for name, options of data gulp.src './templates/a.html' .pipe consolidate 'lodash', title: options.title attrs: options.attrs .pipe rename basename: name extname: '.html' .pipe gulp.dest './html/' rename consolidate gulp.dest gulp.src rename consolidate gulp.dest gulp.src rename consolidate gulp.dest gulp.src es.concat Stream Array gulp = require 'gulp' es = require 'event-stream' consolidate = require 'gulp-consolidate' rename = require 'gulp-rename' Serial Join less cssimport gulp.src autoprexier gulp.dest gulp.src concat minify-css streamqueue gulp = require 'gulp' streamqueue = require 'streamqueue' less = require 'gulp-less' cssimport = require 'gulp-cssimport' autoprefixer = require 'gulp-autoprefixer' concat = require 'gulp-concat' minifyCss = require 'gulp-minify-css' gulp.task 'css', -> streamqueue objectMode: true, gulp.src './css/src/first.less' .pipe less() gulp.src './css/src/second.css' .pipe cssimport() .pipe autoprefixer 'last 2 versions' .pipe concat 'app.css' .pipe minifyCss() .pipe gulp.dest './css/' Async Streams gulp = require 'gulp' merge = require 'merge-stream' less = require 'gulp-less' autoprefixer = require 'gulp-autoprefixer' gulp.task 'css', -> merge( gulp.src './css/src/first.less' .pipe less() .pipe gulp.dest './css/' gulp.src './css/src/second.css' .pipe autoprefixer 'last 2 versions' .pipe gulp.dest './css/' ) less gulp.dest gulp.src autoprexier gulp.dest gulp.src merge
31. ԿΛࣗಈԽ͢Δͷ
32. ࣗಈԽΛඞཁͱ͢ΔλεΫͨͪ 
    -&44
    4BTT
    4UZMVT
    
    $44ͷ࠷దԽ
    
    $P⒎FF4DSJQU
    5ZQF4DSJQU
    -JWF4DSJQU
    
    #SPXTFSJGZ
    3FRVJSFKT
    
    ελΠϧΨΠυ
    
    εϥΠεͷ੾Γग़͠
    
    ը૾ͷ࠷దԽ
    
    ϑΥϯτͷࣗಈੜ੒
    
    ੩తαΠτੜ੒
33. -&44
    4BTT
    4UZMVT ίϯύΠϧ͢Δͱ$44ʹͳΔ΋ͷ
    HVMQMFTT
    HVMQSVCZTBTT
    HVMQTUZMVT
34. $44࠷దԽ !JNQPSUͷຒΊࠐΈɺϕϯμʔϓϦϑΟΫε
    ϛχϑΝΠɺܰྔԽ
    HVMQDTTJNQPSU
    HVMQBVUPQSFpYFS
    HVMQDTTP
    HVMQNJOJGZDTT
    HVMQVODTT
35. $PGGFF4DSJQU
    5ZQF4DSJQU
    -JWF4DSJQU
    ΄͔ ίϯύΠϧ͢Δͱ+BWB4DSJQUʹͳΔ΋ͷ
    HVMQDP⒎FF
    HVMQUZQFTDSJQU
    HVMQMJWFTDSJQU
36. #SPXTFSJGZ
    3FRVJSFKT
    6HMJGZ +BWB4DSJQUͷϥΠϒϥϦґଘΛղܾ͢Δ΋ͷɻ
    ೉ಡԽɾѹॖ͢Δ΋ͷɻ
37. ελΠϧΨΠυ ελΠϧͷ࢓༷ॻతͳΞϨɻ
    HVMQTUZMFEPDDP
38. ը૾ͷ࠷దԽ
    
    εϥΠεͷ੾Γग़͠ ख࡞ۀͱ͔ɺ΋͏͋Γ͑ͳ͍ͷͰɻ
    HVMQCBTF
    HVMQJNBHFNJO
    HVMQTLFUDI
    ! TLFUDIUPPM
    4MJDZ
    ΄͔
39. ϑΥϯτͷࣗಈੜ੒ 47(͔ΒΞΠίϯϑΥϯτΛੜ੒
    HVMQJDPOGPOU
    HVMQTLFUDI
40. ࣗಈԽ͸ͳΜͷͨΊ
41. ࣗಈԽ͸ͳΜͷͨΊ 
    ָ͢ΔͨΊɻ౓ͱಉ͡࡞ۀΛ͠ͳ͍
    
    ίϯύΠϧɺࣗಈੜ੒
    
    ςετɺιʔείʔυͷݕূ
    
    ϦΞϧλΠϜԽ
    -JWF3FMPBE
    #SPXTFS4ZOD ʮඵͰ͖ͯΔʯͱʮ෼ͰͰ͖Δʯ͸શ͘ผϞϊ
42. Ϗϧυπʔϧͷมભ
43. Ϗϧυπʔϧͷੴث࣌୅ 
    γΣϧεΫϦϓτ
    
    "QQMF4DSJQU
    
    "EPCF
    +BWB4DSJQU
44. Ϗϧυπʔϧͷதੈ 
    .BLF
    γΣϧͷԆ௕
    
    3BLF
    3VCZͰ
    
    +BLF
    +BWB4DSJQUͰ
    
    'BCSJD
    1ZUIPOͰ
    
    "OU
    +BWBͰ 8BUDINBO
    'BDFCPPLۘ੡ͷϑΝΠϧ؂ࢹπʔϧ
45. Ϗϧυπʔϧͷۙ୅ 
    (VBSE
    ϑΝΠϧͷߋ৽؂ࢹ
    
    8BUDIS
    ಉ͘͡
    ͨͩ͠ɺݱࡏσΟείϯ ࢀߟ
    .JEEMFNBO
    αʔόαΠυൃ૝ͷ44(
46. Ϗϧυπʔϧͷݱ୅ 
    HVMQ
    Ұ൪׆ൃɻγϯϓϧͳઃఆɺ࣮ߦ଎౓ʹఆධ
    
    (SVOU
    ϓϥάΠϯ࠷ଟɻ͜ͷ෼໺ͷύΠΦχΞ
    
    #SVODI
    ςϯϓϨʔτͱ#PXFS࿈ܞ͕ڧΈ
    
    #SPDDPMJ
    ʮϑΝΠϧπϦʔʯΛՃ޻
51. Ϗϧυπʔϧͷฏߦੈք 
    $PEF,JU
    #PXFSͷ(6*ͱͯ͠΋ػೳ
    
    1SFQSPT
    .BD8JO
    ྆ରԠ
    
    )BNNFS
    
    $BDUVT
54. αʔόɺΫϥΠΞϯτ
    ͦͯ͠ୈࡾۃ
55. αʔό
    WT
    ϒϥ΢β 
    αʔόαΠυɾϓϩάϥϛϯά
    
    ΫϥΠΞϯταΠυɾϓϩάϥϛϯά
56. σβΠϯͷݱ৔͔Βͷཁ੥ 
    ΢ΥʔλʔϑΥʔϧํ๏࿦ͷ่յ
    
    Ϩεϙϯγϒ8FCσβΠϯ
    
    Πϯϒϥ΢βσβΠϯ
    
    σβΠϯ΋

    
    ςετϑΝʔετɺ$*΁
57. ׬੒ਤͷσβΠϯ ը૾ͷ੾Γग़͠ શମͷσβΠϯ σΟςʔϧ ͱΓ͋͑ͣ഑ஔ Ϩεϙϯγϒௐ੔ ͖ͬͪΓ഑ஔ όϥϯεͷௐ੔ Α͋͘Δ8FCσβΠϯͷϑϩʔ ϑϥοτσβΠϯͷϑϩʔ ΞΠίϯͷσβΠϯͱ͔ 
    ؔ܎ੑͷσβΠϯ ৭ຯɾొ৔ཁૉɾ૷০ )5.-ͷߏ଄༏ઌ ແݶϧʔϓ
58. 1$ 5BCMFU 1IPOF
59. 
    σβΠφ΋ࣗಈԽ
    
    )5.-΍$44Ͱ΋ࣗಈԽ
    
    ϑϩϯτΤϯυͷ+BWB4DSJQU։ൃͰ΋ࣗಈԽ
    
    ੍࡞ͷ֤ྖҬͰࣗಈԽ͕ඞཁʹ ͱ͍͏͔ɺ୯७λεΫଟ͗͢ɻ
60. μϝɺ͍ͥͬͨ
    1$্ͷ୯७ͳ൓෮λεΫΛਓ͕΍ͬͯ͸͍͚ͳ͍
61. ͋ΒͨΊͯɺࣗಈԽ  (6*ΞϓϦ͔ΒͷาΈدΓ
    4LFUDI΄͔
     ֤ྖҬͷࣗಈԽ͸࿈ܞ͢Δඞཁ͕͋Δ
     ྫ
    ը૾࠷దԽˠ$44಺Ͱ#"4&Τϯίʔυ
    º৬ਓ࡞ۀɹˠɹ˓ࣗಈԽίʔυͷνϡʔχϯά ͦͷͨΊͷڞ௨ϓϥοτϑΥʔϜ
    /PEFKT
    ˞3VCZ΍4IFMM
    4DSJQU͸མͱ͠Ͳ͜ΖʹͳΒͳ͍
62. ͳͥɺࠓʹͳͬͯʜ
63. ϑϩϯτΤϯυ։ൃ͕੝Μʹͳͬͯɺ
    ϓϩάϥϚ͕ɺ
    ͜ͷྖҬʹೖΓ͔ͩͨ͠Βɻ
64. αʔόɺϒϥ΢βɺୈࡾۃ
65. ͱ͍͏Θ͚Ͱɺ
66. ͓ݟ஌Γஔ͖ΛɻHVMQͰͨ͠ɻ ͱͦͷ஥ؒͨͪ
67. 5IBOL
    ZPV ! facebook.com/cognitom