gulp.js CheatSheet!

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

+ + ৭ʑ

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

ຊ୊Ͱ͢ɻ

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

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

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

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

ͳʹΛࣗಈԽ͢Δͷ HVMQKTͰ

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

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

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

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

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

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

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

΄͔ʹ΋͍Ζ͍Ζ ςετͱ͔ɺςετͱ͔ɺςετͱ͔ɻ

HVMQKTνʔτγʔτ ͜Μͳͷ࡞Γ·ͨ͠

HJUIVCDPNPTTDBGFHVMQDIFBUTIFFU

$P⒎FF4DSJQU൛΋͋ΔΑ

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

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

QBDLBHFKTPO

HVMQpMFDPGGFF ˞KTͰ΋DPGGFFͰ΋0,

8FC'VOEBNFOUBMT CZ(PPHMF ! ϚϧνσόΠεରԠͷ  ελʔλʔΩοτ λεΫϥϯφʔʹHVMQΛ࠾༻ ࢀߟ

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

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

࢖͍͜ͳ͠ͷύλʔϯ

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

ग़ྗઌ͕ෳ਺ 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

ߋ৽ϑΝΠϧ͚ͩॲཧ 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

૿෼ϦϏϧυ 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

ඇಉظλεΫ 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

γϦΞϧλεΫ 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

λεΫͷ഑ྻ 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

HVMQpMF͸ͨͩͷKTͩͬͨʜ

ͱ͍͏Θ͚Ͱɺ

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

5IBOLZPV ! facebook.com/cognitom

gulp.js CheatSheet!

gulp.js CheatSheet!

More Decks by Tsutomu Kawamura

Other Decks in Programming

Featured

Transcript