「gulp.jsチートシート: 使いこなしの7パターン」 東京Node学園 13時限目にて。gulp.jsの基本と、ストリームなタスクを使いこなす7パターンを紹介します。 http://nodejs.connpass.com/event/6763/
! facebook.com/cognitomՏଜHVMQKTνʔτγʔτ͍͜ͳ͠ͷύλʔϯ
View Slide
+ + ৭ʑ
ओʹɺΦʔϓϯιʔεͳͻͱͰ͢ɻ執筆/教育マスター デザイン開発成分表
ຊͰ͢ɻ
ίϨ
Ϗϧυπʔϧͷੴث࣌γΣϧεΫϦϓτ"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ʹͳΔͷHVMQMFTTHVMQSVCZTBTTHVMQTUZMVT
$44࠷దԽ!JNQPSUͷຒΊࠐΈɺϕϯμʔϓϦϑΟΫεϛχϑΝΠɺܰྔԽHVMQDTTJNQPSUHVMQBVUPQSFpYFSHVMQDTTP HVMQNJOJGZDTTHVMQVODTT
$PGGFF4DSJQU 5ZQF4DSJQU -JWF4DSJQU΄͔ίϯύΠϧ͢Δͱ+BWB4DSJQUʹͳΔͷHVMQDP⒎FFHVMQUZQFTDSJQUHVMQMJWFTDSJQU
#SPXTFSJGZ 3FRVJSFKT6HMJGZ+BWB4DSJQUͷϥΠϒϥϦґଘΛղܾ͢ΔͷɻಡԽɾѹॖ͢Δͷɻ
ελΠϧΨΠυελΠϧͷ༷ॻతͳΞϨɻHVMQTUZMFEPDDP
ը૾ͷ࠷దԽεϥΠεͷΓग़͠ख࡞ۀͱ͔ɺ͏͋Γ͑ͳ͍ͷͰɻHVMQCBTFHVMQJNBHFNJOHVMQTLFUDI!TLFUDIUPPM 4MJDZ΄͔
ϑΥϯτͷࣗಈੜ47(͔ΒΞΠίϯϑΥϯτΛੜHVMQJDPOGPOUHVMQTLFUDI
΄͔ʹ͍Ζ͍Ζςετͱ͔ɺςετͱ͔ɺςετͱ͔ɻ
HVMQKTνʔτγʔτ͜Μͳͷ࡞Γ·ͨ͠
HJUIVCDPNPTTDBGFHVMQDIFBUTIFFU
$P⒎FF4DSJQU൛͋ΔΑ
HVMQೖʮΨϧϓ HⓟMQʯͱൃԻɻϑϩϯτΤϯυ੍࡞Ͱඞཁʹͳͬͨɺ͋Ε͜ΕͷࣗಈԽΛ͢ΔͨΊͷɺλεΫϥϯφʔɻ͋Δ͍ɺϏϧυπʔϧɻ
HVMQͷΠϯετʔϧ$ npm install -g gulpάϩʔόϧʹΠϯετʔϧɻ
QBDLBHFKTPO
HVMQpMFDPGGFF˞KTͰDPGGFFͰ0,
8FC'VOEBNFOUBMTCZ(PPHMF! ϚϧνσόΠεରԠͷ ελʔλʔΩοτ λεΫϥϯφʔʹHVMQΛ࠾༻ࢀߟ
͍Ζ͍ΖΠϯετʔϧ$ npm installϩʔΧϧʹHVMQϓϥάΠϯΛΠϯετʔϧɻ
HVMQͷ࣮ߦ$ gulp!$ gulp task_name!$ gulp task1 task2 task3 …ϓϩδΣΫτͷσΟϨΫτϦͰʜ
͍͜ͳ͠ͷύλʔϯ
ग़ྗઌͭࢹuglifycoffee gulp.destgulp.srcgulp = 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.destautoprexier minify-css rename gulp.destgulp.srcgulp = 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.destgulp.srcgulp = 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 concatremember gulp.destgulp.srcgulp = 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
ඇಉظλεΫlessgulp.destgulp.srcautoprexiergulp.destgulp.srcmergegulp = 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
γϦΞϧλεΫlesscssimportgulp.srcautoprexiergulp.destgulp.srcconcatminify-cssstreamqueuegulp = 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
λεΫͷྻrenameconsolidategulp.destgulp.srcrenameconsolidategulp.destgulp.srcrenameconsolidategulp.destgulp.srces.concatgulp.task 'page', ->es.concat.apply null,for name, options of datagulp.src './templates/a.html'.pipe consolidate 'lodash',title: options.titleattrs: options.attrs.pipe renamebasename: nameextname: '.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_dataorange:title: 'Orange Cookie'attrs: some_data...7
HVMQpMFͨͩͷKTͩͬͨʜ
ͱ͍͏Θ͚Ͱɺ
͓ݟΓஔ͖ΛɻHVMQͰͨ͠ɻ
5IBOLZPV! facebook.com/cognitom
cognitom
amixedcolor
suzukihoge
m_coder
slsops
loic425
skanehira
pospome
joker1007
daisukeshinoku
hschwentner
tapompom
subomi
swwweet
dougneiner
keavy
shpigford
speakerdeck
nonsquared
maggiecrowley
moore
jponch
eileencodes
tmm1
jasonvnalue