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を使うと彼女ができるよ - かんたんな紹介とハンズオン
Search
Kohei Asai
September 30, 2014
Programming
2
990
gulpを使うと彼女ができるよ - かんたんな紹介とハンズオン
nodejsで動くビルドシステムヘルパー「gulp」の紹介とハンズオンを2014/09/30に社内で行った時のスライドです。
Kohei Asai
September 30, 2014
Tweet
Share
More Decks by Kohei Asai
See All by Kohei Asai
The State Transparented Web Application
axross
1
230
UIコンポーネント指向と「協働」
axross
6
2.7k
安全なJavaScriptを書く
axross
22
8.3k
Introduction to Redux
axross
34
21k
作るのにデザイナーもエンジニアもない
axross
15
7.1k
なぜprottか
axross
4
2.6k
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
axross
0
360
Nodeとフロントエンド − 知っておかなければならない、今と未来の話 −
axross
2
1.3k
Other Decks in Programming
See All in Programming
Jakarta EE meets AI
ivargrimstad
0
670
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
120
Amazon Bedrock Agentsを用いてアプリ開発してみた!
har1101
0
340
どうして僕の作ったクラスが手続き型と言われなきゃいけないんですか
akikogoto
1
120
型付き API リクエストを実現するいくつかの手法とその選択 / Typed API Request
euxn23
8
2.2k
subpath importsで始めるモック生活
10tera
0
310
Jakarta EE meets AI
ivargrimstad
0
130
タクシーアプリ『GO』のリアルタイムデータ分析基盤における機械学習サービスの活用
mot_techtalk
4
1.5k
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
100
2024/11/8 関西Kaggler会 2024 #3 / Kaggle Kernel で Gemma 2 × vLLM を動かす。
kohecchi
5
930
Quine, Polyglot, 良いコード
qnighy
4
650
レガシーシステムにどう立ち向かうか 複雑さと理想と現実/vs-legacy
suzukihoge
14
2.2k
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
88
5.7k
Why You Should Never Use an ORM
jnunemaker
PRO
54
9.1k
Side Projects
sachag
452
42k
[RailsConf 2023] Rails as a piece of cake
palkan
52
4.9k
The Pragmatic Product Professional
lauravandoore
31
6.3k
Fireside Chat
paigeccino
34
3k
How to Think Like a Performance Engineer
csswizardry
20
1.1k
Imperfection Machines: The Place of Print at Facebook
scottboms
265
13k
The Cult of Friendly URLs
andyhume
78
6k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
720
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
169
50k
What's new in Ruby 2.0
geeforr
343
31k
Transcript
HVMQΛ͏ͱ ൴ঁ͕Ͱ͖·͢ ͔ΜͨΜͳհͱϋϯζΦϯ
͓͠ͳ͕͖ HVMQͷ͔ΜͨΜͳઆ໌ ΏΔ͍ϋϯζΦϯ ϋϯζΦϯͰͬͨίʔυͷղઆͭͭ͠"1*ͷઆ໌
ࣗݾհ ͍͋͜͞͏͍ 6*69σβΠϯ෦ϑϩϯτΤϯυΤϯδχΞతͳͭ ݄ೖࣾ OPEFͱFYQSFTTͱBOHVMBSͰݺٵͯ͠Δ ! Github : @axross
Twitter : @axross_
ͬͯ·͔͢ʁ /PEFKTͰಈ͘ ϏϧυγεςϜϔϧύʔʢλεΫϥϯφʔΈ͍ͨͳΜʣ ϑϩϯτΤϯυ։ൃͰͷ࡞ۀΛࣗಈԽͨ͠Γ͢Δ (SVOUΈ͍ͨͳͭ طଘͷ044ϓϩδΣΫτͷ͍͔ͭ͘HVMQҠߦɺ ৽نͷͷHVMQͷ࠾༻ྫ͕૿͍͑ͯΔ༷
ࣗಈԽ͍ͨ͜͠ͱ MFTT4$44ͷίϯύΠϧ $44ͷϕϯμʔϓϦϑΟοΫεͷهѹॖ $P⒎FF4DSJQU5ZQF4DSJQUͷίϯύΠϧ +BWBTDSJQUͷґଘղܾܰྔԽɾಡԽ ը૾ͷ࠷దԽCBTFԽͯ͠$44ຒΊࠐΉ ελΠϧΨΠυͷੜ ςετ
(SVOUͱͷҧ͍ ΑΓOPEF $PNNPO+4 ͬΆ͍ॻ͖ํ ϝλϑΝΠϧ͕+4ͱͯ݁ͯͨ͠͠Γ 4USFBNΛར༻ͯ͠ॲཧΛͨ͠Γ ϝιουνΣΠϯͰॲཧΛॻ͍͍ͯ͘ λεΫϥϯφʔͱͯ͠ൈ܈ʹॻ͖͍͢ ײతͰ࠷ݶͷ"1* ޙൃͳͷͰ·ͩϓϥάΠϯͷ(SVOUʹٴͳ͍
EJGGUP
࣮ࡍʹͬͯΈΑ͏ ͡Ό͋
ࠓճΓ͍ͨ͜ͱ MFTTΛDTTʹม͍ͨ͠ ͦΕΛNJOJGZʢॖԽʣͨ͠ͷΛผʹग़ྗ͍ͨ͠ ͜ΕΒΛࣗಈԽ͍ͨ͠
ࠓճΓ͍ͨ͜ͱ MFTTΛDTTʹม͍ͨ͠ ͦΕΛNJOJGZʢॖԽʣͨ͠ͷΛผʹग़ྗ͍ͨ͠ ͜ΕΒΛࣗಈԽ͍ͨ͠
४උ ࠇ͍ը໘Λ͍·͢ ! σΟϨΫτϦΛ࡞͓ͬͯ͘ ࠓޙɺ͜ͷσΟϨΫτϦͷதͰ࡞ۀ͠·͢ $ mkdir gulp_training $ cd
gulp_training
४උʢʣ ࡶʹIUNMΛॻ͘ JOEFYIUNM <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8">
<link rel="stylesheet" href="./style.min.css"> </head> <body> <div class="accept">͍</div> <div class="decline">͍͍͑</div> <div class="later">͋ͱͰ</div> </body>
४උʢʣ ࡶʹMFTTΛॻ͘ TUZMFMFTT @blue: #03a9f4; @orange: #ff5722; ! .button(@color: #607d8b)
{ display: inline-block; padding: 8px 16px; border-radius: 4px; background: @color; box-shadow: darken(@color, 15%) 0 4px 0; color: #ffffff; } .accept { .button(@blue); } .decline { .button(@orange); } .later { .button(); }
OPEFKTͷΠϯετʔϧ Πϯετʔϧ͞Ε͍ͯΔ͔֬ೝ $ node -v Πϯετʔϧ͍ͯ͠ͳ͍ਓOPEFCSFX͔OWNͰೖΕ ͍ͯͩ͘͞ $ curl -L
git.io/nodebrew | perl - setup $ export PATH=$HOME/.nodebrew/current/bin:$PATH $ source ~/.bashrc $ nodebrew install-binary stable $ nodebrew use stable
QBDLBHFKTPOΛ ࡞͓ͬͯ͘ ར༻ʢґଘʣ͢ΔύοέʔδΛهɾڞ༗͢ΔͨΊʹɺ QBDLBHFKTPOΛ࡞͓ͯ͘͠ $ npm init Οβʔυʹରͯ͠ɺͯ͢&OUFSΩʔʢ:FTʣͰ0,
HVMQͷΠϯετʔϧ $-*Ͱ͑ΔΑ͏ʹάϩʔόϧΠϯετʔϧ $ npm install -g gulp
HVMQͷϓϥάΠϯͷ Πϯετʔϧ ࠓճMFTTͷίϯύΠϧΛͯ͠ΈΔ HVMQຊମͱHVMQMFTTΛೖΕΔ $ npm install --save-dev gulp gulp-less
QBDLBHFKTPOʹ͍ͭͯ OQNJOTUBMMͷͱ͖ʹʮTBWFʯʮTBWFEFWʯΛͭ ͚ΔͱɺQBDLBHFKTPOʹه͞ΕΔ ͜ͷQBDLBHFKTPOΛHJUͳͲͰཧɾڞ༗͢Εɺ ίϛοτ͍ͯ͠ΔଞͷϝϯόʔʮOQNJOTUBMMʯ͚ͩͰ ඞཁͳύοέʔδΛΠϯετʔϧͰ͖Δ ʮHʯΛ͚ͭͨͷه͞Εͳ͍ ϓϩδΣΫτͰͳ͘ڥʹΠϯετʔϧ͢ΔͨΊ ʢิʣ
HVMQpMFKTΛ࡞Δ ʮHVMQpMFKTʯͱ͍͏໊લͷϑΝΠϧΛ࡞Γ·͢ $ atom gulpfile.js ීஈͬͯΔΤσΟλ͕͋ΔਓɺTVCMͩͬͨΓWJͩͬͨΓɺ ͦΕͧΕ͍͍ײ͡ʹ͍ͬͯͩ͘͞
HVMQpMFKTΛ࡞Δ ͜Μͳײ͡ʹॻ͖·͢ HVMQpMFKT var gulp = require('gulp'); var less =
require('gulp-less'); ! gulp.task('default', function() { return gulp.src('./style.less') .pipe(less({ paths: ['./'] })) .pipe(gulp.dest('./')); });
HVMQpMFKTͱ HVMQͷλεΫͱॲཧΛهड़͢Δ ୯ମͷKTϑΝΠϧͰɺ+BWBTDSJQUΛॻ͘ OPEFKTͰී௨ʹಈ͘ͷͰڥมͳΜ͔ΠέΔ 3VCZͷ3BLFͰ͍͏3BLFpMFʹ͍ۙ HVMQͷSFRVJSFΛআ͚ɺϑΝΠϧ୯ମ͕Ϟδϡʔϧͱ͠ ͍ͯ݁ͯ͠ΔͷͰɺґଘ͕ؔΘ͔Γ͍͢ ʢิʣ
HVMQΛಈ͔ͯ͠ΈΔ ʮHVMQʯίϚϯυͰHVMQΛಈ͔͢ $ gulp
͜Μͳײ͡ʹͳΓ·ͨ͠ʁ HVMQͷ݁Ռ $ gulp [13:14:39] Using gulpfile ~/gulp-training/gulpfile.js [13:14:39] Starting
'default'... [13:14:39] Finished 'default' after 42 ms ʮTUZMFDTTʯ͕ੜ͞Ε͍ͯΔ % ls gulpfile.js node_modules/ style.css index.html package.json style.less
Ͱ͖ͨͶʂʂʂ MFTTΛDTTʹม͍ͨ͠ ͦΕΛNJOJGZʢॖԽʣͨ͠ͷΛผʹग़ྗ͍ͨ͠ ͜ΕΒΛࣗಈԽ͍ͨ͠
͡Ό͋࣍ʹΓ͍ͨ͜ͱ MFTTΛDTTʹม͍ͨ͠ ͦΕΛNJOJGZʢॖԽʣͨ͠ͷΛผʹग़ྗ͍ͨ͠ ͜ΕΒΛࣗಈԽ͍ͨ͠
HVMQͷϓϥάΠϯͷ ՃΠϯετʔϧ $44ͷѹॖͱɺ͚ͯग़ͨ͢ΊʹϦωʔϜΛ͍ͨ͠ HVMQDTTPͱHVMQSFOBNFΛೖΕΔ $ npm install --save-dev gulp-csso gulp-rename
HVMQpMFKTʹॻ͖͢ var gulp = require('gulp'); var less = require('gulp-less'); var
csso = require('gulp-csso'); var rename = require('gulp-rename'); ! gulp.task('default', function() { return gulp.src('./style.less') .pipe(less({ paths: ['./'] })) .pipe(gulp.dest('./')) .pipe(csso()) .pipe(rename('style.min.css')) .pipe(gulp.dest('./')); });
͜Μͳײ͡ʹͳΓ·ͨ͠ʁ HVMQͷ݁Ռ $ gulp [13:32:16] Using gulpfile ~/gulp-training/gulpfile.js [13:32:16] Starting
'default'... [13:32:16] Finished 'default' after 68 ms TUZMFDTTʹՃ͑ɺʮTUZMFNJODTTʯ͕ੜ͞Ε͍ͯΔ % ls gulpfile.js node_modules/ style.css style.min.css index.html package.json style.less
Ͱ͖ͨͶʂʂʂʂʂʂʂ MFTTΛDTTʹม͍ͨ͠ ͦΕΛNJOJGZʢॖԽʣͨ͠ͷΛผʹग़ྗ͍ͨ͠ ͜ΕΒΛࣗಈԽ͍ͨ͠
࠷ޙʹΓ͍ͨ͜ͱ MFTTΛDTTʹม͍ͨ͠ ͦΕΛNJOJGZʢॖԽʣͨ͠ͷΛผʹग़ྗ͍ͨ͠ ͜ΕΒΛࣗಈԽ͍ͨ͠
HVMQpMFKTʹॻ͖͢ var gulp = require('gulp'); var less = require('gulp-less'); var
csso = require('gulp-csso'); var rename = require('gulp-rename'); ! gulp.task('default', function() { return gulp.src('./style.less') .pipe(less({ paths: ['./'] })) .pipe(gulp.dest('./')) .pipe(csso()) .pipe(rename('style.min.css')) .pipe(gulp.dest('./')); }); ! gulp.task('watch', function() { return gulp.watch('./*.less', ['default']) });
͜Μͳײ͡ʹͳΓ·ͨ͠ʁ HVMQͷ݁Ռ $ gulp watch [13:38:51] Using gulpfile ~/gulp-training/gulpfile.js [13:38:51]
Starting 'watch'... [13:38:51] Finished 'watch' after 6.38 ms TUZMFMFTTΛฤूͯ͠อଘ͢ΔͱɺউखʹʮEFGBVMUʯ λεΫ͕Δ [13:39:09] Starting 'default'... [13:39:09] Finished 'default' after 62 ms
Ͱ͖ͨͶʂʂʂʂʂ ͍͢͝Ͷʂʂʂ MFTTΛDTTʹม͍ͨ͠ ͦΕΛNJOJGZʢॖԽʣͨ͠ͷΛผʹग़ྗ͍ͨ͠ ͜ΕΒΛࣗಈԽ͍ͨ͠
ϋϯζΦϯ·ͱΊ HVMQΛOQNͰάϩʔόϧΠϯετʔϧ͢Δ HVMQϓϥάΠϯΛOQNͰϩʔΧϧΠϯετʔϧ͢Δ ͜ͷ࣌ɺTBWFEFWͯ͠QBDLBHFKTPOʹه͖͢ HVMQϓϥάΠϯSFRVJSFͯ͠ɺQJQFʹ͢ ϝιουνΣΠϯͰܨ͛ͯ௨ͤΔ HVMQXBUDI͍ͬͯ͏ͭͰϑΝΠϧͷࢹ͕Ͱ͖Δ λεΫॲཧΛॻ͖͢ͷָ͕͍͢͝
"1*ͷઆ໌ ͬ͘͞Γͱ
var gulp = require('gulp'); var less = require('gulp-less'); var csso
= require('gulp-csso'); var rename = require('gulp-rename'); ! gulp.task('default', function() { return gulp.src('./style.less') .pipe(less({ paths: ['./'] })) .pipe(gulp.dest('./')) .pipe(csso()) .pipe(rename('style.min.css')) .pipe(gulp.dest('./')); }); ! gulp.task('watch', function() { return gulp.watch('./*.less', ['default']) }); λεΫͷ࡞
λεΫͷ࡞ʢʣ ʮHVMQλεΫ໊ʯͷΑ͏ʹ࣮ߦ͢ΔͨΊͷλεΫΛఆٛ͢Δ OBNFɺλεΫ໊Λ4USJOHͰࢦఆ͢Δ ʮEFGBVMUʯͱ͍͏λεΫ໊༧ޠɺʮHVMQʯͷΈͰ࣮ߦͰ͖Δ EFQTɺ͜ͷλεΫͷલʹ࣮ߦ͍ͤͨ͞λεΫ໊Λ"SSBZͰࢦఆͰ͖Δ ෳͷλεΫΛͭͷΤϯτϦϙΠϯτʹ·ͱΊΔ͜ͱ͕Ͱ͖Δ ͳͯ͘Α͍ GOʹɺλεΫͷதΛ'VODUJPOͱͯ͢͠ gulp.task(name, [deps],
fn)
var gulp = require('gulp'); var less = require('gulp-less'); var csso
= require('gulp-csso'); var rename = require('gulp-rename'); ! gulp.task('default', function() { return gulp.src('./style.less') .pipe(less({ paths: ['./'] })) .pipe(gulp.dest('./')) .pipe(csso()) .pipe(rename('style.min.css')) .pipe(gulp.dest('./')); }); ! gulp.task('watch', function() { return gulp.watch('./*.less', ['default']) }); ϑΝΠϧͷಡΈࠐΈ
ϑΝΠϧͷಡΈࠐΈʢʣ HMPCTɺHMPCͱͳΔ4USJOH͔ɺͦΕΒ͕֨ೲ͞Εͨ"SSBZΛࢦఆ͢Δ ෳͨ͠߹ɺҎ߱ͷQJQFHMPCTͯ͢ʹ͔͔Δ PQUJPOTͰϑϥάΛཱͯΔͱCV⒎FSͱͯ͠ಡΈࠐΜͩΓ৭ʑͰ͖Δ ͋·ΓΒͳ͍ͱࢥ͏ͷͰׂѪɺ"1*ࢀর ͪΖΜͳͯ͘Α͍ 4USFBN͕ฦΔ QJQFԽͨ͠ϓϥάΠϯΛ௨ͤΔ gulp.src(globs [,
options])
var gulp = require('gulp'); var less = require('gulp-less'); var csso
= require('gulp-csso'); var rename = require('gulp-rename'); ! gulp.task('default', function() { return gulp.src('./style.less') .pipe(less({ paths: ['./'] })) .pipe(gulp.dest('./')) .pipe(csso()) .pipe(rename('style.min.css')) .pipe(gulp.dest('./')); }); ! gulp.task('watch', function() { return gulp.watch('./*.less', ['default']) }); QJQFΛ௨͢
QJQFΛ௨͢ʢʣ HVMQTSDͰฦͬͨ4USFBNʹɺQJQFԽ͞ΕͨHVMQͷϓϥάΠϯΛ௨͢͜ ͱ͕Ͱ͖Δ ͖ͬ͞ͷྫͩͱɺHVMQMFTTHVMQSFOBNFͳͲ͕ͦΕʹ͋ͨΔ QJQFͦͷ··ܧଓͯ͠4USFBNΛฦ͢ͷͰɺϝιουνΣΠϯͯ࣍͠ʑ ʹQJQFΛ௨͢͜ͱ͕Ͱ͖Δ gulp.src(...).pipe(pipedGulpPlugin)
var gulp = require('gulp'); var less = require('gulp-less'); var csso
= require('gulp-csso'); var rename = require('gulp-rename'); ! gulp.task('default', function() { return gulp.src('./style.less') .pipe(less({ paths: ['./'] })) .pipe(gulp.dest('./')) .pipe(csso()) .pipe(rename('style.min.css')) .pipe(gulp.dest('./')); }); ! gulp.task('watch', function() { return gulp.watch('./*.less', ['default']) }); ϑΝΠϧͷॻ͖ग़͠
ϑΝΠϧͷॻ͖ग़͠ʢʣ ࢦఆͨ͠QBUIʹϑΝΠϧΛॻ͖ग़͢ QBUIͰࢦఆͰ͖ΔͷσΟϨΫτϦ໊·Ͱ ϦωʔϜ͍ͨ͠߹HVMQSFOBNFΛQJQFͰ௨͢ σΟϨΫτϦ͕ଘࡏ͠ͳ͍߹ࣗಈతʹ࡞ΒΕΔ PQUJPOTͰϑΝΠϧͷύʔϛογϣϯࢦఆͨ͠ΓͰ͖Δ HVMQEFTUࣗମ͕QJQFͰ௨ͤΔ gulp.dest(path [, options])
var gulp = require('gulp'); var less = require('gulp-less'); var csso
= require('gulp-csso'); var rename = require('gulp-rename'); ! gulp.task('default', function() { return gulp.src('./style.less') .pipe(less({ paths: ['./'] })) .pipe(gulp.dest('./')) .pipe(csso()) .pipe(rename('style.min.css')) .pipe(gulp.dest('./')); }); ! gulp.task('watch', function() { return gulp.watch('./*.less', ['default']) }); ϑΝΠϧͷࢹ
ϑΝΠϧͷࢹʢʣ HMPCʹ4USJOHͰࢦఆ͞ΕͨϑΝΠϧΛࢹ͢Δ UBTLTʹHVMQUBTLͰఆ͍ٛͯ͠ΔλεΫ໊Λ"SSBZͰࢦఆ͢Δ (SVOUͱಉ͡Α͏ʹ෦ͰHB[Fͱ͍͏ύοέʔδΛ͍ͬͯͯɺ PQUJPOTͷͦͷΜͷ"1*ಉ͡ ୈࡾҾʢUBTLTʣʹ"SSBZ͡Όͳͯ͘'VODUJPOΛ͢ͱɺ DCతͳײ͡ʹΰχϣΰχϣ͢Δ͜ͱͰ͖Δ gulp.watch(glob [, options],
tasks)
͜Μ͚ͩͰ͢ EPDTʹ͜Ε͔͠ࡌͬͯͳ͍
"1*·ͱΊ HVMQUBTLͰλεΫΛఆٛ͢Δ ͜Εͷલʹ͜ͷλεΫͬͯͶɺΈ͍ͨͳͷΧϯλϯ HVMQTSDͰϑΝΠϧΛಡΈࠐΉ HVMQTSDͨ͠ͷʹQJQFͯ͠ɺॲཧΛ௨͍ͯ͘͠ ग़ྗ͢Δͱ͖HVMQEFTU HVMQEFTUࣗମQJQFʹ௨͢ͷͰɺNJOJGZ͢Δ࣌ͱָ͔
2" Կ͔͋Γ·͔͢ʁ
ଞʹֶͼํͱ͔ QMVHJOͷ୳͠ํͱ͔ ެࣜυΩϡϝϯτ https://github.com/gulpjs/gulp/blob/master/docs/README.md ! HVMQKTͦͷϓϥάΠϯҰཡ http://qiita.com/oreo3@github/items/0f037e7409be02336cb9 ! OQNͱ͔(JU)VCΛఆظతʹXBUDI͢ΔͱΑ͍ υΩϡϝϯτʹSFDJQFT͕͋ΔͷͰɺࢀߟʹ͢ΔͱΑ͍
͝ਗ਼ௌ͋Γ͕ͱ͏ ͍͟͝·ͨ͠