Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
gulp.js: Getting Started
Search
Tsutomu Kawamura
August 26, 2014
Programming
2
4k
gulp.js: Getting Started
「はじめてのgulp」gulp.jsの連載始めます〜
LIG月刊ライトニングトーク2014年8月号: MEAN 祭り にて
http://connpass.com/event/7779/
Tsutomu Kawamura
August 26, 2014
Tweet
Share
More Decks by Tsutomu Kawamura
See All by Tsutomu Kawamura
Connect your library to the world
cognitom
0
95
JTF2018
cognitom
5
1.2k
Riot: changing on v3 and its companion tools
cognitom
0
120
LLoT Night - Riot.js
cognitom
1
920
Felt - a simple web server with the power of the future
cognitom
0
300
Riot: all about v2 to v3
cognitom
7
3.7k
Create A Small Studio in A Cafe
cognitom
2
890
Riot.js in WPD-Week
cognitom
19
11k
Riot and Components
cognitom
4
580
Other Decks in Programming
See All in Programming
PHP でアセンブリ言語のように書く技術
memory1994
PRO
1
150
Golang と Erlang
taiyow
8
1.9k
What’s New in Compose Multiplatform - A Live Tour (droidcon London 2024)
zsmb
1
340
約9000個の自動テストの 時間を50分->10分に短縮 Flakyテストを1%以下に抑えた話
hatsu38
23
11k
Vue SFCのtemplateでTypeScriptの型を活用しよう
tsukkee
3
1.5k
色々なIaCツールを実際に触って比較してみる
iriikeita
0
270
破壊せよ!データ破壊駆動で考えるドメインモデリング / data-destroy-driven
minodriven
16
4.1k
hotwire_or_react
harunatsujita
8
4.1k
macOS でできる リアルタイム動画像処理
biacco42
7
1.8k
Server Driven Compose With Firebase
skydoves
0
400
Googleのテストサイズを活用したテスト環境の構築
toms74209200
0
270
CPython 인터프리터 구조 파헤치기 - PyCon Korea 24
kennethanceyer
0
240
Featured
See All Featured
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
A Modern Web Designer's Workflow
chriscoyier
692
190k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
290
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
27
790
Designing for Performance
lara
604
68k
How GitHub (no longer) Works
holman
311
140k
Adopting Sorbet at Scale
ufuk
73
9k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
Making Projects Easy
brettharned
115
5.9k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
31
2.7k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
41
2.1k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5k
Transcript
! 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