gulp.js: Getting Started

「はじめてのgulp」gulp.jsの連載始めます〜

LIG月刊ライトニングトーク2014年8月号: MEAN 祭り にて
http://connpass.com/event/7779/

Transcript

1. ! facebook.com/cognitom Տଜ
   ঑ ͸͡ΊͯͷHVMQ
   Ծ HVMQKTͷ࿈ࡌ࢝Ί·͢ʙ
2. /FX
   "1*T
   HVMQQBSBMMFM
   HVMQTFSJFT
   4PVSDF
   .BQ
   ʜFUD
3. + + ৭ʑ
4. ओʹɺ
   Φʔϓϯιʔε
   ͳͻͱͰ͢ɻ 執筆/教育 マスター デザイン 開発 成分表
5. ຊ୊Ͱ͢ɻ
6. ίϨ
7. ੎͍͍ͮͯ·͢ɻ
8. 8FC
   'VOEBNFOUBMT CZ
   (PPHMF
   !  ϚϧνσόΠεରԠͷ
 ελʔλʔΩοτ
    λεΫϥϯφʔʹHVMQΛ࠾༻ (PPHMFɺHVMQԡ͠
9. ͳʹΛࣗಈԽ͢Δͷ HVMQKT
   Ͱ
10. -&44
    4BTT
    4UZMVT ίϯύΠϧ͢Δͱ$44ʹͳΔ΋ͷ
    HVMQMFTT
    HVMQSVCZTBTT
    HVMQTUZMVT
11. $44࠷దԽ !JNQPSUͷຒΊࠐΈɺϕϯμʔϓϦϑΟΫε
    ϛχϑΝΠɺܰྔԽ
    HVMQDTTJNQPSU
    HVMQBVUPQSFpYFS
    HVMQDTTP
    HVMQNJOJGZDTT
    HVMQVODTT
12. $PGGFF4DSJQU
    5ZQF4DSJQU
    -JWF4DSJQU
    ΄͔ ίϯύΠϧ͢Δͱ+BWB4DSJQUʹͳΔ΋ͷ
    HVMQDP⒎FF
    HVMQUZQFTDSJQU
    HVMQMJWFTDSJQU
13. #SPXTFSJGZ
    3FRVJSFKT
    %VP
    6HMJGZ +BWB4DSJQUͷϥΠϒϥϦґଘΛղܾ͢Δ΋ͷɻ
    ೉ಡԽɾѹॖ͢Δ΋ͷɻ
14. ը૾ͷ࠷దԽ
    
    εϥΠεͷ੾Γग़͠ ख࡞ۀͱ͔ɺ΋͏͋Γ͑ͳ͍ͷͰɻ
    HVMQCBTF
    HVMQJNBHFNJO
    HVMQTLFUDI
    ! TLFUDIUPPM
    4MJDZ
    ΄͔
15. ϑΥϯτͷࣗಈੜ੒ 47(͔ΒΞΠίϯϑΥϯτΛੜ੒
    HVMQJDPOGPOU
    HVMQTLFUDI
16. HVMQKT
    ௒ೖ໳ ͱΓ͋͑ͣ
17. HVMQͱ͸ ʮΨϧϓ
    HⓟMQ ʯͱൃԻɻ
    ϑϩϯτΤϯυ੍࡞Ͱඞਢͱͳͬͨɺ
    ͋Ε΍͜ΕͷࣗಈԽΛ͢Δɺ
    ͋ͳͨͷͨΊͷλεΫϥϯφʔ
    Ϗϧυπʔϧ ɻ
18. HVMQͷΠϯετʔϧ $ npm install -g gulp άϩʔόϧʹΠϯετʔϧɻ
19. ͍Ζ͍ΖΠϯετʔϧ $ npm install QBDLBHFKTPO
    Λ༻ҙͯ͠ɺ
    ϩʔΧϧʹHVMQ΍ϓϥάΠϯΛΠϯετʔϧɻ
20. QBDLBHFKTPO
21. SFQMBDF
    HSVOU DPOUMJC H
    bHVMQ` ͭ·Γ
22. HVMQpMF
    Λॻ͘ ࣗಈԽͷखॱΛɺ
    +BWB4DSJQU
    
    $P⒎FF4DSJQUʜ
    Ͱهड़ɻॲཧ͸ύΠϓͰͭͳ͛Δɻ
23. HVMQpMFDPGGFF
    ˞KTͰ΋DPGGFFͰ΋0,
24. HVMQͷ࣮ߦ $ gulp! $ gulp task_name! $ gulp task1 task2 task3 … ϓϩδΣΫτͷσΟϨΫτϦͰʜ
25. HVMQKTͷύλʔϯ
26. ग़ྗઌͭ
    
    ؂ࢹ uglify coffee gulp.dest gulp.src gulp = require 'gulp' coffee = require 'gulp-coffee' uglify = require 'gulp-uglify' gulp.task 'js', -> 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'] 1
27. ग़ྗઌ͕ෳ਺ 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/‘ gulp = require 'gulp' autoprefixer = require 'gulp-autoprefixer' minifyCss = require 'gulp-minify-css' rename = require 'gulp-rename' 2
28. ߋ৽ϑΝΠϧ͚ͩॲཧ 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/' gulp = require 'gulp' changed = require 'gulp-changed' uglify = require 'gulp-uglify' gulp.task 'script', -> 3
29. γϦΞϧλεΫ 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', -> 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/' 4
30. HVMQpMF
    ͸ͨͩͷ
    KTͩͬͨʜ
31. ͱ͍͏Θ͚Ͱɺ
32. ͜Μͳײ͡ͷ಺༰Ͱ
    ɹ࿈ࡌΛ࢝Ί·ͨ͠ɻ
33. $PEF;JOFʹͯ
34. ແ๳ʹ΋
    ӳޠ൛΋ެ։ ͪ͜Β͸Φʔϓϯιʔε
35. ैདྷͷ
    υΩϡϝϯτ຋༁ &OHMJTIɾݩݪߘ ೔ຊޠɾ຋༁൛ ੈքతʹҰํ௨ߦ
36. ͜ΕͰ͍͍ͷ͔
37. ݪߘྉͷҰ෦ Λɺ຋༁ʹͭ͗ࠐΊ͹
    স ೔ຊޠɾฤू൛ ೔ຊޠɾݩݪߘ &OHMJTIɾΦʔϓϯιʔε൛ ैདྷͷ
    υΩϡϝϯτ຋༁ &OHMJTIɾݩݪߘ ೔ຊޠɾ຋༁൛
38. DPHOJUPNHVMQIBOECPPL
39. 5IBOL
    ZPV ! facebook.com/cognitom