Upgrade to Pro — share decks privately, control downloads, hide ads and more …

gulp.js CheatSheet!

gulp.js CheatSheet!

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

2be94635664f02d169e343e4024f0ad5?s=128

Tsutomu Kawamura

June 23, 2014
Tweet

More Decks by Tsutomu Kawamura

Other Decks in Programming

Transcript

  1. ! facebook.com/cognitom Տଜ঑ HVMQKTνʔτγʔτ ࢖͍͜ͳ͠ͷύλʔϯ

  2. + + ৭ʑ

  3. ओʹɺ Φʔϓϯιʔε ͳͻͱͰ͢ɻ 執筆/教育 マスター デザイン 開発 成分表

  4. ຊ୊Ͱ͢ɻ

  5. ίϨ

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

  7. Ϗϧυπʔϧͷதੈ .BLFγΣϧͷԆ௕ 3BLF3VCZͰ +BLF+BWB4DSJQUͰ 'BCSJD1ZUIPOͰ "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. 5IBOLZPV ! facebook.com/cognitom