gulp.js: Getting Started

! facebook.com/cognitom Տଜ঑ ͸͡ΊͯͷHVMQ Ծ HVMQKTͷ࿈ࡌ࢝Ί·͢ʙ

/FX"1*T HVMQQBSBMMFM HVMQTFSJFT 4PVSDF.BQʜFUD

+ + ৭ʑ

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

ຊ୊Ͱ͢ɻ

੎͍͍ͮͯ·͢ɻ

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

ͳʹΛࣗಈԽ͢Δͷ 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 %VP 6HMJGZ +BWB4DSJQUͷϥΠϒϥϦґଘΛղܾ͢Δ΋ͷɻ ೉ಡԽɾѹॖ͢Δ΋ͷɻ

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

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

HVMQKT௒ೖ໳ ͱΓ͋͑ͣ

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

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

͍Ζ͍ΖΠϯετʔϧ $ npm install QBDLBHFKTPOΛ༻ҙͯ͠ɺ ϩʔΧϧʹHVMQ΍ϓϥάΠϯΛΠϯετʔϧɻ

QBDLBHFKTPO

SFQMBDFHSVOU DPOUMJC H bHVMQ` ͭ·Γ

HVMQpMFΛॻ͘ ࣗಈԽͷखॱΛɺ +BWB4DSJQU$P⒎FF4DSJQUʜ Ͱهड़ɻॲཧ͸ύΠϓͰͭͳ͛Δɻ

HVMQpMFDPGGFF ˞KTͰ΋DPGGFFͰ΋0,

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

HVMQKTͷύλʔϯ

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

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

HVMQpMF͸ͨͩͷKTͩͬͨʜ

ͱ͍͏Θ͚Ͱɺ

͜Μͳײ͡ͷ಺༰Ͱ ɹ࿈ࡌΛ࢝Ί·ͨ͠ɻ

$PEF;JOFʹͯ

ແ๳ʹ΋ ӳޠ൛΋ެ։ ͪ͜Β͸Φʔϓϯιʔε

ैདྷͷ υΩϡϝϯτ຋༁ &OHMJTIɾݩݪߘ ೔ຊޠɾ຋༁൛ ੈքతʹҰํ௨ߦ

͜ΕͰ͍͍ͷ͔

ݪߘྉͷҰ෦ Λɺ຋༁ʹͭ͗ࠐΊ͹ স ೔ຊޠɾฤू൛ ೔ຊޠɾݩݪߘ &OHMJTIɾΦʔϓϯιʔε൛ ैདྷͷ υΩϡϝϯτ຋༁ &OHMJTIɾݩݪߘ ೔ຊޠɾ຋༁൛

DPHOJUPNHVMQIBOECPPL

5IBOLZPV ! facebook.com/cognitom

gulp.js: Getting Started

gulp.js: Getting Started

More Decks by Tsutomu Kawamura

Other Decks in Programming

Featured

Transcript