Front-end Build Tools - JTF2014 Tokyo

Front-end Build Tools - JTF2014 Tokyo

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

2be94635664f02d169e343e4024f0ad5?s=128

Tsutomu Kawamura

June 22, 2014
Tweet

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γΣϧͷԆ௕ 3BLF3VCZͰ +BLF+BWB4DSJQUͰ 'BCSJD1ZUIPOͰ "OU+BWBͰ 8BUDINBO'BDFCPPLۘ੡ͷϑΝΠϧ؂ࢹπʔϧ

  45. Ϗϧυπʔϧͷۙ୅ (VBSEϑΝΠϧͷߋ৽؂ࢹ 8BUDISಉ͘͡ ͨͩ͠ɺݱࡏσΟείϯ ࢀߟ.JEEMFNBO αʔόαΠυൃ૝ͷ44(

  46. Ϗϧυπʔϧͷݱ୅ HVMQҰ൪׆ൃɻγϯϓϧͳઃఆɺ࣮ߦ଎౓ʹఆධ (SVOUϓϥάΠϯ࠷ଟɻ͜ͷ෼໺ͷύΠΦχΞ #SVODIςϯϓϨʔτͱ#PXFS࿈ܞ͕ڧΈ #SPDDPMJʮϑΝΠϧπϦʔʯΛՃ޻

  47. None
  48. None
  49. None
  50. None
  51. Ϗϧυπʔϧͷฏߦੈք $PEF,JU#PXFSͷ(6*ͱͯ͠΋ػೳ 1SFQSPT.BD8JO྆ରԠ )BNNFS $BDUVT

  52. None
  53. None
  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΍4IFMM4DSJQU͸མͱ͠Ͳ͜ΖʹͳΒͳ͍

  62. ͳͥɺࠓʹͳͬͯʜ

  63. ϑϩϯτΤϯυ։ൃ͕੝Μʹͳͬͯɺ ϓϩάϥϚ͕ɺ ͜ͷྖҬʹೖΓ͔ͩͨ͠Βɻ

  64. αʔόɺϒϥ΢βɺୈࡾۃ

  65. ͱ͍͏Θ͚Ͱɺ

  66. ͓ݟ஌Γஔ͖ΛɻHVMQͰͨ͠ɻ ͱͦͷ஥ؒͨͪ

  67. 5IBOLZPV ! facebook.com/cognitom