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
130
JTF2018
cognitom
5
1.3k
Riot: changing on v3 and its companion tools
cognitom
0
130
LLoT Night - Riot.js
cognitom
1
1k
Felt - a simple web server with the power of the future
cognitom
0
320
Riot: all about v2 to v3
cognitom
7
3.8k
Create A Small Studio in A Cafe
cognitom
2
920
Riot.js in WPD-Week
cognitom
19
11k
Riot and Components
cognitom
4
640
Other Decks in Programming
See All in Programming
LLMとPlaywright/reg-suitを活用した jQueryリファクタリングの実際
kinocoboy2
4
670
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
170
非同期jobをtransaction内で 呼ぶなよ!絶対に呼ぶなよ!
alstrocrack
0
530
Чего вы не знали о строках в Python – Василий Рябов, PythoNN
sobolevn
0
160
デミカツ切り抜きで面倒くさいことはPythonにやらせよう
aokswork3
0
190
2分台で1500examples完走!爆速CIを支える環境構築術 - Kaigi on Rails 2025
falcon8823
3
3.2k
プログラミングどうやる? ~テスト駆動開発から学ぶ達人の型~
a_okui
0
190
CSC305 Lecture 02
javiergs
PRO
1
260
Web フロントエンドエンジニアに開かれる AI Agent プロダクト開発 - Vercel AI SDK を観察して AI Agent と仲良くなろう! #FEC余熱NIGHT
izumin5210
3
400
NetworkXとGNNで学ぶグラフデータ分析入門〜複雑な関係性を解き明かすPythonの力〜
mhrtech
3
1k
ИИ-Агенты в каждый дом – Алексей Порядин, PythoNN
sobolevn
0
150
Pythonスレッドとは結局何なのか? CPython実装から見るNoGIL時代の変化
curekoshimizu
4
1.3k
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
56
14k
Thoughts on Productivity
jonyablonski
70
4.9k
Code Review Best Practice
trishagee
72
19k
Site-Speed That Sticks
csswizardry
11
880
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
Automating Front-end Workflow
addyosmani
1371
200k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
Building Applications with DynamoDB
mza
96
6.6k
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