gulp.js CheatSheet!

「gulp.jsチートシート: 使いこなしの7パターン」
東京Node学園 13時限目にて。gulp.jsの基本と、ストリームなタスクを使いこなす7パターンを紹介します。
http://nodejs.connpass.com/event/6763/

Transcript

1. ! facebook.com/cognitom Տଜ
   ঑ HVMQKT
   νʔτγʔτ ࢖͍͜ͳ͠ͷύλʔϯ
2. + + ৭ʑ
3. ओʹɺ
   Φʔϓϯιʔε
   ͳͻͱͰ͢ɻ 執筆/教育 マスター デザイン 開発 成分表
4. ຊ୊Ͱ͢ɻ
5. ίϨ
6. Ϗϧυπʔϧͷੴث࣌୅ 
   γΣϧεΫϦϓτ
   
   "QQMF4DSJQU
   
   "EPCF
   +BWB4DSJQU
7. Ϗϧυπʔϧͷதੈ 
   .BLF
   γΣϧͷԆ௕
   
   3BLF
   3VCZͰ
   
   +BLF
   +BWB4DSJQUͰ
   
   'BCSJD
   1ZUIPOͰ
   
   "OU
   +BWBͰ 8BUDINBO
   'BDFCPPLۘ੡ͷϑΝΠϧ؂ࢹπʔϧ
8. Ϗϧυπʔϧͷۙ୅ 
   (VBSE
   ϑΝΠϧͷߋ৽؂ࢹ
   
   8BUDIS
   ಉ͘͡
   ͨͩ͠ɺݱࡏσΟείϯ ࢀߟ
   .JEEMFNBO
   αʔόαΠυൃ૝ͷ44(
9. Ϗϧυπʔϧͷݱ୅ 
   HVMQ
   ׆ൃɻγϯϓϧͳઃఆɺ࣮ߦ଎౓ʹఆධ
   
   (SVOU
   ϓϥάΠϯ࠷ଟɻ͜ͷ෼໺ͷύΠΦχΞ
   
   #SVODI
   ςϯϓϨʔτͱ#PXFS࿈ܞ͕ڧΈ
   
   #SPDDPMJ
   ʮϑΝΠϧπϦʔʯΛՃ޻
10. ͳʹΛࣗಈԽ͢Δͷ HVMQKT
    Ͱ
11. -&44
    4BTT
    4UZMVT ίϯύΠϧ͢Δͱ$44ʹͳΔ΋ͷ
    HVMQMFTT
    HVMQSVCZTBTT
    HVMQTUZMVT
12. $44࠷దԽ !JNQPSUͷຒΊࠐΈɺϕϯμʔϓϦϑΟΫε
    ϛχϑΝΠɺܰྔԽ
    HVMQDTTJNQPSU
    HVMQBVUPQSFpYFS
    HVMQDTTP
    HVMQNJOJGZDTT
    HVMQVODTT
13. $PGGFF4DSJQU
    5ZQF4DSJQU
    -JWF4DSJQU
    ΄͔ ίϯύΠϧ͢Δͱ+BWB4DSJQUʹͳΔ΋ͷ
    HVMQDP⒎FF
    HVMQUZQFTDSJQU
    HVMQMJWFTDSJQU
14. #SPXTFSJGZ
    3FRVJSFKT
    6HMJGZ +BWB4DSJQUͷϥΠϒϥϦґଘΛղܾ͢Δ΋ͷɻ
    ೉ಡԽɾѹॖ͢Δ΋ͷɻ
15. ελΠϧΨΠυ ελΠϧͷ࢓༷ॻతͳΞϨɻ
    HVMQTUZMFEPDDP
16. ը૾ͷ࠷దԽ
    
    εϥΠεͷ੾Γग़͠ ख࡞ۀͱ͔ɺ΋͏͋Γ͑ͳ͍ͷͰɻ
    HVMQCBTF
    HVMQJNBHFNJO
    HVMQTLFUDI
    ! TLFUDIUPPM
    4MJDZ
    ΄͔
17. ϑΥϯτͷࣗಈੜ੒ 47(͔ΒΞΠίϯϑΥϯτΛੜ੒
    HVMQJDPOGPOU
    HVMQTLFUDI
18. ΄͔ʹ΋͍Ζ͍Ζ ςετͱ͔ɺςετͱ͔ɺςετͱ͔ɻ
19. HVMQKT
    νʔτγʔτ ͜Μͳͷ࡞Γ·ͨ͠
20. HJUIVCDPNPTTDBGFHVMQDIFBUTIFFU
21. $P⒎FF4DSJQU൛΋͋ΔΑ
22. HVMQೖ໳ ʮΨϧϓ
    HⓟMQ ʯͱൃԻɻ
    ϑϩϯτΤϯυ੍࡞Ͱඞཁʹͳͬͨɺ
    ͋Ε΍͜ΕͷࣗಈԽΛ͢ΔͨΊͷɺ
    λεΫϥϯφʔɻ͋Δ͍͸ɺϏϧυπʔϧɻ
23. HVMQͷΠϯετʔϧ $ npm install -g gulp άϩʔόϧʹΠϯετʔϧɻ
24. QBDLBHFKTPO
25. HVMQpMFDPGGFF
    ˞KTͰ΋DPGGFFͰ΋0,
26. 8FC
    'VOEBNFOUBMT CZ
    (PPHMF
    !  ϚϧνσόΠεରԠͷ
 ελʔλʔΩοτ
     λεΫϥϯφʔʹHVMQΛ࠾༻ ࢀߟ
27. ͍Ζ͍ΖΠϯετʔϧ $ npm install ϩʔΧϧʹHVMQ΍ϓϥάΠϯΛΠϯετʔϧɻ
28. HVMQͷ࣮ߦ $ gulp! $ gulp task_name! $ gulp task1 task2 task3 … ϓϩδΣΫτͷσΟϨΫτϦͰʜ
29. ࢖͍͜ͳ͠ͷύλʔϯ
30. ग़ྗઌͭ
    
    ؂ࢹ 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
31. ग़ྗઌ͕ෳ਺ 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
32. ߋ৽ϑΝΠϧ͚ͩॲཧ 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
33. ૿෼ϦϏϧυ 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 = 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/‘ 4
34. ඇಉظλεΫ less gulp.dest gulp.src autoprexier gulp.dest gulp.src merge 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/' ) gulp = require 'gulp' merge = require 'merge-stream' less = require 'gulp-less' autoprefixer = require 'gulp-autoprefixer' gulp.task 'css', -> 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/' gulp = require 'gulp' merge = require 'merge-stream' less = require 'gulp-less' autoprefixer = require 'gulp-autoprefixer' gulp.task 'css', -> 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/' ࢀߟ/(ྫ 5
35. γϦΞϧλεΫ 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/' 6
36. λεΫͷ഑ྻ rename consolidate gulp.dest gulp.src rename consolidate gulp.dest gulp.src rename consolidate gulp.dest gulp.src es.concat 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/' data = gulp = require 'gulp' es = require 'event-stream' consolidate = require 'gulp-consolidate' rename = require 'gulp-rename' ⇧ BQQMF PSBOHF ʜ data = apple: title: 'Apple Cake' attrs: some_data orange: title: 'Orange Cookie' attrs: some_data ... 7
37. HVMQpMF
    ͸ͨͩͷ
    KTͩͬͨʜ
38. ͱ͍͏Θ͚Ͱɺ
39. ͓ݟ஌Γஔ͖ΛɻHVMQͰͨ͠ɻ
40. 5IBOL
    ZPV ! facebook.com/cognitom