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
96
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
Make Impossible States Impossibleを 意識してReactのPropsを設計しよう
ikumatadokoro
0
230
LLM生成文章の精度評価自動化とプロンプトチューニングの効率化について
layerx
PRO
2
190
とにかくAWS GameDay!AWSは世界の共通言語! / Anyway, AWS GameDay! AWS is the world's lingua franca!
seike460
PRO
1
890
リアーキテクチャxDDD 1年間の取り組みと進化
hsawaji
1
220
TypeScriptでライブラリとの依存を限定的にする方法
tutinoko
3
690
距離関数を極める! / SESSIONS 2024
gam0022
0
290
Webの技術スタックで マルチプラットフォームアプリ開発を可能にするElixirDesktopの紹介
thehaigo
2
1k
Pinia Colada が実現するスマートな非同期処理
naokihaba
4
230
RubyLSPのマルチバイト文字対応
notfounds
0
120
Compose 1.7のTextFieldはPOBox Plusで日本語変換できない
tomoya0x00
0
190
Tauriでネイティブアプリを作りたい
tsucchinoko
0
370
Jakarta EE meets AI
ivargrimstad
0
660
Featured
See All Featured
It's Worth the Effort
3n
183
27k
For a Future-Friendly Web
brad_frost
175
9.4k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.3k
Teambox: Starting and Learning
jrom
133
8.8k
RailsConf 2023
tenderlove
29
900
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Navigating Team Friction
lara
183
14k
[RailsConf 2023] Rails as a piece of cake
palkan
52
4.9k
Being A Developer After 40
akosma
87
590k
VelocityConf: Rendering Performance Case Studies
addyosmani
325
24k
A Modern Web Designer's Workflow
chriscoyier
693
190k
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