Front-end Build Tools - JTF2014 Tokyo

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

Transcript

1. ! facebook.com/cognitom
   Տଜ঑
   ϑϩϯτΤϯυͰීٴ͕ਐΉ
   Ϗϧυπʔϧͨͪ
   (SVOUɺHVMQ΄͔
   

   View Slide

2. + + ৭ʑ
   

   View Slide

3. ओʹɺΧϑΣͷ
   ϚελʔͰ͢ɻ
   執筆/教育
   マスター デザイン
   開発
   成分表
   

   View Slide

4. ϑϧελοΫͳ
   ΤϯδχΞʹͳΔ΂͘ɺ
   

   View Slide

5. ໺ࡊ޻৔͸͡Ί·ͨ͠ɻ
   

   View Slide

6. ͢Έ·ͤΜɺ੝Γ͗͢·ͨ͠ɻ
   

   View Slide

7. ଟॏԽɾ৑௕ԽΛࢹ໺ʹ
   

   View Slide

8. ͱΓ͋͑ͣɺൃժΛ଴͍ͬͯ·͢ɻ
   

   View Slide

9. ຊ୊Ͱ͢ɻ
   

   View Slide

10. ΠϯϑϥΤϯδχΞͷͨΊͷ
    ڭཆՊ໨
    

    View Slide

11. wϑϩϯτΤϯυ੍࡞ͷʮࠓʯ
    wϏϧυπʔϧͷมભ
    wαʔόɺΫϥΠΞϯτɺͦͯ͠ୈࡾۃ
    ϑϩϯτΤϯυͰීٴ͕ਐΉ
    Ϗϧυπʔϧͨͪ
    

    View Slide

12. ϑϩϯτΤϯυπʔϧͷʮࠓʯ
    

    View Slide

13. σϞ
    

    View Slide

14. HVMQ
    

    View Slide

15. #SPXTXF4ZODͷσϞ
    

    View Slide

16. *MMVTUSBUPSϑΝΠϧ؂ࢹͷσϞ
    

    View Slide

17. (SVOU঺հ
    ʮάϥϯτ HSⓟOU
    ʯͱൃԻɻ
    ϑϩϯτΤϯυ੍࡞Ͱඞཁʹͳͬͨɺ
    ͋Ε΍͜ΕͷࣗಈԽΛ͢ΔͨΊͷɺ
    λεΫϥϯφʔɻ͋Δ͍͸ɺϏϧυπʔϧɻ
    ϑϩϯτΤϯυͷࣗಈԽͷཱ໾ऀɻ
    

    View Slide

18. (SVOUͷΠϯετʔϧͱ࣮ߦ
    $ grunt!
    $ grunt task_name
    ϓϩδΣΫτͷσΟϨΫτϦͰʜ
    $ npm install -g gulp-cli
    /PEFKT͕ඞཁɻάϩʔόϧʹΠϯετʔϧɻ
    

    View Slide

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']
    

    View Slide

20. 8FC'VOEBNFOUBMT
    CZ(PPHMF
    !
    ϚϧνσόΠεରԠͷ

    ελʔλʔΩοτ
    λεΫϥϯφʔʹHVMQΛ࠾༻
    

    View Slide

21. ͜Ε͔Β࢝ΊΔͳΒɺHVMQͰ
    ৽͠໨ͷϓϩδΣΫτ͸HVMQΛ࠾༻ JO(JU)VC
    
    طଘϓϩδΣΫτ΋Ҡߦ͕࢝·͍ͬͯΔ
    !
    ˞ͨͩ͠ɺϫʔΫϑϩʔ͕ݻ·ͬͯ͠·ͬͨ
    ɹ੍࡞ݱ৔Ͱ͸ɺࠓޙ΋౰໘(SVOU͕࢖ΘΕΔ
    

    View Slide

22. HVMQೖ໳
    ʮΨϧϓ HⓟMQ
    ʯͱൃԻɻ
    ϑϩϯτΤϯυ੍࡞Ͱඞཁʹͳͬͨɺ
    ͋Ε΍͜ΕͷࣗಈԽΛ͢ΔͨΊͷɺ
    λεΫϥϯφʔɻ͋Δ͍͸ɺϏϧυπʔϧɻ
    

    View Slide

23. HVMQͷΠϯετʔϧ
    $ npm install -g gulp
    /PEFKT͕ඞཁɻάϩʔόϧʹΠϯετʔϧɻ
    

    View Slide

24. QBDLBHFKTPO
    

    View Slide

25. HVMQpMFDPGGFF
    

    View Slide

26. HVMQͷ࣮ߦ
    $ gulp!
    $ gulp task_name!
    $ gulp task1 task2 task3 …
    ϓϩδΣΫτͷσΟϨΫτϦͰʜ
    

    View Slide

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
    ग़ྗઌͭ؂ࢹ
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

31. ԿΛࣗಈԽ͢Δͷ
    

    View Slide

32. ࣗಈԽΛඞཁͱ͢ΔλεΫͨͪ
    -&44 4BTT 4UZMVT$44ͷ࠷దԽ
    $P⒎FF4DSJQU 5ZQF4DSJQU -JWF4DSJQU
    #SPXTFSJGZ 3FRVJSFKT
    ελΠϧΨΠυ
    εϥΠεͷ੾Γग़͠ը૾ͷ࠷దԽ
    ϑΥϯτͷࣗಈੜ੒
    ੩తαΠτੜ੒
    

    View Slide

33. -&44 4BTT 4UZMVT
    ίϯύΠϧ͢Δͱ$44ʹͳΔ΋ͷ
    HVMQMFTT
    HVMQSVCZTBTT
    HVMQTUZMVT
    

    View Slide

34. $44࠷దԽ
    !JNQPSUͷຒΊࠐΈɺϕϯμʔϓϦϑΟΫε
    ϛχϑΝΠɺܰྔԽ
    HVMQDTTJNQPSU
    HVMQBVUPQSFpYFS
    HVMQDTTP HVMQNJOJGZDTT
    HVMQVODTT
    

    View Slide

35. $PGGFF4DSJQU 5ZQF4DSJQU
    -JWF4DSJQU΄͔
    ίϯύΠϧ͢Δͱ+BWB4DSJQUʹͳΔ΋ͷ
    HVMQDP⒎FF
    HVMQUZQFTDSJQU
    HVMQMJWFTDSJQU
    

    View Slide

36. #SPXTFSJGZ 3FRVJSFKT
    6HMJGZ
    +BWB4DSJQUͷϥΠϒϥϦґଘΛղܾ͢Δ΋ͷɻ
    ೉ಡԽɾѹॖ͢Δ΋ͷɻ
    

    View Slide

37. ελΠϧΨΠυ
    ελΠϧͷ࢓༷ॻతͳΞϨɻ
    HVMQTUZMFEPDDP
    

    View Slide

38. ը૾ͷ࠷దԽεϥΠεͷ੾Γग़͠
    ख࡞ۀͱ͔ɺ΋͏͋Γ͑ͳ͍ͷͰɻ
    HVMQCBTF
    HVMQJNBHFNJO
    HVMQTLFUDI
    !
    TLFUDIUPPM 4MJDZ΄͔
    

    View Slide

39. ϑΥϯτͷࣗಈੜ੒
    47(͔ΒΞΠίϯϑΥϯτΛੜ੒
    HVMQJDPOGPOU
    HVMQTLFUDI
    

    View Slide

40. ࣗಈԽ͸ͳΜͷͨΊ
    

    View Slide

41. ࣗಈԽ͸ͳΜͷͨΊ
    ָ͢ΔͨΊɻ౓ͱಉ͡࡞ۀΛ͠ͳ͍
    ίϯύΠϧɺࣗಈੜ੒
    ςετɺιʔείʔυͷݕূ
    ϦΞϧλΠϜԽ -JWF3FMPBE #SPXTFS4ZOD
    
    ʮඵͰ͖ͯΔʯͱʮ෼ͰͰ͖Δʯ͸શ͘ผϞϊ
    

    View Slide

42. Ϗϧυπʔϧͷมભ
    

    View Slide

43. Ϗϧυπʔϧͷੴث࣌୅
    γΣϧεΫϦϓτ
    "QQMF4DSJQU
    "EPCF+BWB4DSJQU
    

    View Slide

44. Ϗϧυπʔϧͷதੈ
    .BLFγΣϧͷԆ௕
    3BLF3VCZͰ
    +BLF+BWB4DSJQUͰ
    'BCSJD1ZUIPOͰ
    "OU+BWBͰ
    8BUDINBO'BDFCPPLۘ੡ͷϑΝΠϧ؂ࢹπʔϧ
    

    View Slide

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

    View Slide

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

    View Slide

47. View Slide

48. View Slide

49. View Slide

50. View Slide

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

    View Slide

52. View Slide

53. View Slide

54. αʔόɺΫϥΠΞϯτ
    ͦͯ͠ୈࡾۃ
    

    View Slide

55. αʔόWTϒϥ΢β
    αʔόαΠυɾϓϩάϥϛϯά
    ΫϥΠΞϯταΠυɾϓϩάϥϛϯά
    

    View Slide

56. σβΠϯͷݱ৔͔Βͷཁ੥
    ΢ΥʔλʔϑΥʔϧํ๏࿦ͷ่յ
    Ϩεϙϯγϒ8FCσβΠϯ
    Πϯϒϥ΢βσβΠϯ
    σβΠϯ΋

    ςετϑΝʔετɺ$*΁
    

    View Slide

57. ׬੒ਤͷσβΠϯ
    ը૾ͷ੾Γग़͠
    શମͷσβΠϯ
    σΟςʔϧ
    ͱΓ͋͑ͣ഑ஔ
    Ϩεϙϯγϒௐ੔
    ͖ͬͪΓ഑ஔ
    όϥϯεͷௐ੔
    Α͋͘Δ8FCσβΠϯͷϑϩʔ
    ϑϥοτσβΠϯͷϑϩʔ
    ΞΠίϯͷσβΠϯͱ͔
    ؔ܎ੑͷσβΠϯ
    ৭ຯɾొ৔ཁૉɾ૷০
    )5.-ͷߏ଄༏ઌ
    ແݶϧʔϓ
    

    View Slide

58. 1$
    5BCMFU
    1IPOF
    

    View Slide

59. σβΠφ΋ࣗಈԽ
    )5.-΍$44Ͱ΋ࣗಈԽ
    ϑϩϯτΤϯυͷ+BWB4DSJQU։ൃͰ΋ࣗಈԽ
    ੍࡞ͷ֤ྖҬͰࣗಈԽ͕ඞཁʹ
    ͱ͍͏͔ɺ୯७λεΫଟ͗͢ɻ
    

    View Slide

60. μϝɺ͍ͥͬͨ
    1$্ͷ୯७ͳ൓෮λεΫΛਓ͕΍ͬͯ͸͍͚ͳ͍
    

    View Slide

61. ͋ΒͨΊͯɺࣗಈԽ
    (6*ΞϓϦ͔ΒͷาΈدΓ4LFUDI΄͔
    ֤ྖҬͷࣗಈԽ͸࿈ܞ͢Δඞཁ͕͋Δ
    ྫը૾࠷దԽˠ$44಺Ͱ#"4&Τϯίʔυ
    º৬ਓ࡞ۀɹˠɹ˓ࣗಈԽίʔυͷνϡʔχϯά
    ͦͷͨΊͷڞ௨ϓϥοτϑΥʔϜ/PEFKT
    ˞3VCZ΍4IFMM4DSJQU͸མͱ͠Ͳ͜ΖʹͳΒͳ͍
    

    View Slide

62. ͳͥɺࠓʹͳͬͯʜ
    

    View Slide

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

    View Slide

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

    View Slide

65. ͱ͍͏Θ͚Ͱɺ
    

    View Slide

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

    View Slide

67. 5IBOLZPV
    ! facebook.com/cognitom
    

    View Slide