Front-end Build Tools - JTF2014 Tokyo

! facebook.com/cognitom Տଜ঑ ϑϩϯτΤϯυͰීٴ͕ਐΉ Ϗϧυπʔϧͨͪ (SVOUɺHVMQ΄͔

+ + ৭ʑ

ओʹɺΧϑΣͷ ϚελʔͰ͢ɻ 執筆/教育マスターデザイン開発成分表

ϑϧελοΫͳ ΤϯδχΞʹͳΔ΂͘ɺ

໺ࡊ޻৔͸͡Ί·ͨ͠ɻ

͢Έ·ͤΜɺ੝Γ͗͢·ͨ͠ɻ

ଟॏԽɾ৑௕ԽΛࢹ໺ʹ

ͱΓ͋͑ͣɺൃժΛ଴͍ͬͯ·͢ɻ

ຊ୊Ͱ͢ɻ

ΠϯϑϥΤϯδχΞͷͨΊͷ ڭཆՊ໨

wϑϩϯτΤϯυ੍࡞ͷʮࠓʯ wϏϧυπʔϧͷมભ wαʔόɺΫϥΠΞϯτɺͦͯ͠ୈࡾۃ ϑϩϯτΤϯυͰීٴ͕ਐΉ Ϗϧυπʔϧͨͪ

ϑϩϯτΤϯυπʔϧͷʮࠓʯ

#SPXTXF4ZODͷσϞ

*MMVTUSBUPS ϑΝΠϧ؂ࢹͷσϞ

(SVOU঺հ ʮάϥϯτ HSⓟOU ʯͱൃԻɻ ϑϩϯτΤϯυ੍࡞Ͱඞཁʹͳͬͨɺ ͋Ε΍͜ΕͷࣗಈԽΛ͢ΔͨΊͷɺ λεΫϥϯφʔɻ͋Δ͍͸ɺϏϧυπʔϧɻ ϑϩϯτΤϯυͷࣗಈԽͷཱ໾ऀɻ

(SVOUͷΠϯετʔϧͱ࣮ߦ $ grunt! $ grunt task_name ϓϩδΣΫτͷσΟϨΫτϦͰʜ $ npm install
-g gulp-cli /PEFKT͕ඞཁɻάϩʔόϧʹΠϯετʔϧɻ

gulp.task 'sass', -> gulp.src 'app/styles/**/*.scss' .pipe sass() .pipe autoprefixer 'last
1 version' .pipe gulp.dest ‘dist/styles' ! gulp.task 'default', ['sass'] -> gulp.watch 'app/styles/**/*.scss', ['sass'] grunt.initConfig sass: dist: files: [ cwd: 'app/styles' src: '**/*.scss' dest: '../.tmp/styles' expand: true ext: '.css' ] autoprefixer: options: ['last 1 version'] dist: files: [ expand: true cwd: '.tmp/styles' src: '{,*/}*.css' dest: 'dist/styles ] watch: styles: files: ['app/styles/{,*/}*.scss'] tasks: ['sass:dist', ‘autoprefixer:dist'] ! grunt.registerTask 'default', ['styles', 'watch']

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

͜Ε͔Β࢝ΊΔͳΒɺHVMQͰ ৽͠໨ͷϓϩδΣΫτ͸HVMQΛ࠾༻ JO(JU)VC طଘϓϩδΣΫτ΋Ҡߦ͕࢝·͍ͬͯΔ ! ˞ͨͩ͠ɺϫʔΫϑϩʔ͕ݻ·ͬͯ͠·ͬͨ ɹ੍࡞ݱ৔Ͱ͸ɺࠓޙ΋౰໘(SVOU͕࢖ΘΕΔ

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

HVMQͷΠϯετʔϧ $ npm install -g gulp /PEFKT͕ඞཁɻάϩʔόϧʹΠϯετʔϧɻ

QBDLBHFKTPO

HVMQpMFDPGGFF

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.src './js/src/*.coffee' .pipe coffee() .pipe uglify() .pipe gulp.dest ‘./js/‘ gulp.task 'watch', -> gulp.watch './js/src/*.coffee', ['js'] Single Dest & Watch ग़ྗઌͭ ؂ࢹ

ग़ྗઌ͕ෳ਺ 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/‘ Multi Dest

มߋՕॴΛݟͯϏϧυ 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.src './js/src/*.js' .pipe cached() .pipe uglify() .pipe remember() .pipe concat 'app.js' .pipe gulp.dest ‘./js/‘ Incremental Rebuilding 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/' Only Changed

data = apple: title: 'Apple Cake' attrs: some_data orange: title:
'Orange Cookie' attrs: some_data 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/' rename consolidate gulp.dest gulp.src rename consolidate gulp.dest gulp.src rename consolidate gulp.dest gulp.src es.concat Stream Array gulp = require 'gulp' es = require 'event-stream' consolidate = require 'gulp-consolidate' rename = require 'gulp-rename' Serial Join 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', -> 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/' Async Streams 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/' ) less gulp.dest gulp.src autoprexier gulp.dest gulp.src merge

ԿΛࣗಈԽ͢Δͷ

ࣗಈԽΛඞཁͱ͢ΔλεΫͨͪ -&44 4BTT 4UZMVT$44ͷ࠷దԽ $P⒎FF4DSJQU 5ZQF4DSJQU -JWF4DSJQU #SPXTFSJGZ 3FRVJSFKT ελΠϧΨΠυ
εϥΠεͷ੾Γग़͠ը૾ͷ࠷దԽ ϑΥϯτͷࣗಈੜ੒ ੩తαΠτੜ੒

-&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

ࣗಈԽ͸ͳΜͷͨΊ

ࣗಈԽ͸ͳΜͷͨΊ ָ͢ΔͨΊɻ౓ͱಉ͡࡞ۀΛ͠ͳ͍ ίϯύΠϧɺࣗಈੜ੒ ςετɺιʔείʔυͷݕূ ϦΞϧλΠϜԽ -JWF3FMPBE #SPXTFS4ZOD ʮඵͰ͖ͯΔʯͱʮ෼ͰͰ͖Δʯ͸શ͘ผϞϊ

Ϗϧυπʔϧͷมભ

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

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

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

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

Ϗϧυπʔϧͷฏߦੈք $PEF,JU#PXFSͷ(6*ͱͯ͠΋ػೳ 1SFQSPT.BD8JO྆ରԠ )BNNFS $BDUVT

αʔόɺΫϥΠΞϯτ ͦͯ͠ୈࡾۃ

αʔόWTϒϥ΢β αʔόαΠυɾϓϩάϥϛϯά ΫϥΠΞϯταΠυɾϓϩάϥϛϯά

σβΠϯͷݱ৔͔Βͷཁ੥ ΢ΥʔλʔϑΥʔϧํ๏࿦ͷ่յ Ϩεϙϯγϒ8FCσβΠϯ Πϯϒϥ΢βσβΠϯ σβΠϯ΋  ςετϑΝʔετɺ$*΁

׬੒ਤͷσβΠϯ ը૾ͷ੾Γग़͠ શମͷσβΠϯ σΟςʔϧ ͱΓ͋͑ͣ഑ஔ Ϩεϙϯγϒௐ੔ ͖ͬͪΓ഑ஔ όϥϯεͷௐ੔ Α͋͘Δ8FCσβΠϯͷϑϩʔ ϑϥοτσβΠϯͷϑϩʔ
ΞΠίϯͷσβΠϯͱ͔ ؔ܎ੑͷσβΠϯ ৭ຯɾొ৔ཁૉɾ૷০ )5.-ͷߏ଄༏ઌ ແݶϧʔϓ

1$ 5BCMFU 1IPOF

σβΠφ΋ࣗಈԽ )5.-΍$44Ͱ΋ࣗಈԽ ϑϩϯτΤϯυͷ+BWB4DSJQU։ൃͰ΋ࣗಈԽ ੍࡞ͷ֤ྖҬͰࣗಈԽ͕ඞཁʹ ͱ͍͏͔ɺ୯७λεΫଟ͗͢ɻ

μϝɺ͍ͥͬͨ 1$্ͷ୯७ͳ൓෮λεΫΛਓ͕΍ͬͯ͸͍͚ͳ͍

͋ΒͨΊͯɺࣗಈԽ (6*ΞϓϦ͔ΒͷาΈدΓ4LFUDI΄͔ ֤ྖҬͷࣗಈԽ͸࿈ܞ͢Δඞཁ͕͋Δ ྫը૾࠷దԽˠ$44಺Ͱ#"4&Τϯίʔυ º৬ਓ࡞ۀɹˠɹ˓ࣗಈԽίʔυͷνϡʔχϯά ͦͷͨΊͷڞ௨ϓϥοτϑΥʔϜ/PEFKT ˞3VCZ΍4IFMM4DSJQU͸མͱ͠Ͳ͜ΖʹͳΒͳ͍

ͳͥɺࠓʹͳͬͯʜ

ϑϩϯτΤϯυ։ൃ͕੝Μʹͳͬͯɺ ϓϩάϥϚ͕ɺ ͜ͷྖҬʹೖΓ͔ͩͨ͠Βɻ

αʔόɺϒϥ΢βɺୈࡾۃ

ͱ͍͏Θ͚Ͱɺ

͓ݟ஌Γஔ͖ΛɻHVMQͰͨ͠ɻ ͱͦͷ஥ؒͨͪ

5IBOLZPV ! facebook.com/cognitom

Front-end Build Tools - JTF2014 Tokyo

Front-end Build Tools - JTF2014 Tokyo

More Decks by Tsutomu Kawamura

Other Decks in Programming

Featured

Transcript