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/

Tsutomu Kawamura

June 23, 2014
Tweet

More Decks by Tsutomu Kawamura

Other Decks in Programming

Transcript

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

    View Slide

  2. + + ৭ʑ

    View Slide

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

    View Slide

  4. ຊ୊Ͱ͢ɻ

    View Slide

  5. ίϨ

    View Slide

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

    View Slide

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

    View Slide

  8. Ϗϧυπʔϧͷۙ୅
    (VBSEϑΝΠϧͷߋ৽؂ࢹ
    8BUDISಉ͘͡ ͨͩ͠ɺݱࡏσΟείϯ

    ࢀߟ.JEEMFNBO αʔόαΠυൃ૝ͷ44(

    View Slide

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

    View Slide

  10. ͳʹΛࣗಈԽ͢Δͷ
    HVMQKTͰ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  18. ΄͔ʹ΋͍Ζ͍Ζ
    ςετͱ͔ɺςετͱ͔ɺςετͱ͔ɻ

    View Slide

  19. HVMQKTνʔτγʔτ
    ͜Μͳͷ࡞Γ·ͨ͠

    View Slide

  20. HJUIVCDPNPTTDBGFHVMQDIFBUTIFFU

    View Slide

  21. $P⒎FF4DSJQU൛΋͋ΔΑ

    View Slide

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

    View Slide

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

    View Slide

  24. QBDLBHFKTPO

    View Slide

  25. HVMQpMFDPGGFF
    ˞KTͰ΋DPGGFFͰ΋0,

    View Slide

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

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

    View Slide

  27. ͍Ζ͍ΖΠϯετʔϧ
    $ npm install
    ϩʔΧϧʹHVMQ΍ϓϥάΠϯΛΠϯετʔϧɻ

    View Slide

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

    View Slide

  29. ࢖͍͜ͳ͠ͷύλʔϯ

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  37. HVMQpMF͸ͨͩͷKTͩͬͨʜ

    View Slide

  38. ͱ͍͏Θ͚Ͱɺ

    View Slide

  39. ͓ݟ஌Γஔ͖ΛɻHVMQͰͨ͠ɻ

    View Slide

  40. 5IBOLZPV
    ! facebook.com/cognitom

    View Slide