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
1k
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
270
UIコンポーネント指向と「協働」
axross
6
2.8k
安全なJavaScriptを書く
axross
22
8.5k
Introduction to Redux
axross
34
22k
作るのにデザイナーもエンジニアもない
axross
14
7.2k
なぜprottか
axross
4
2.7k
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
axross
0
400
Nodeとフロントエンド − 知っておかなければならない、今と未来の話 −
axross
2
1.4k
Other Decks in Programming
See All in Programming
DockerからECSへ 〜 AWSの海に出る前に知っておきたいこと 〜
ota1022
5
1.8k
マイコンでもRustのtestがしたい その2/KernelVM Tokyo 18
tnishinaga
2
2.3k
Constant integer division faster than compiler-generated code
herumi
2
700
AWS Serverless Application Model入門_20250708
smatsuzaki
0
130
Terraform やるなら公式スタイルガイドを読もう 〜重要項目 10選〜
hiyanger
13
3.2k
未来を拓くAI技術〜エージェント開発とAI駆動開発〜
leveragestech
2
180
学習を成果に繋げるための個人開発の考え方 〜 「学習のための個人開発」のすすめ / personal project for leaning
panda_program
1
110
開発チーム・開発組織の設計改善スキルの向上
masuda220
PRO
15
8k
Kiroの仕様駆動開発から見えてきたAIコーディングとの正しい付き合い方
clshinji
1
150
令和最新版手のひらコンピュータ
koba789
14
8k
為你自己學 Python - 冷知識篇
eddie
1
140
AI時代のドメイン駆動設計-DDD実践におけるAI活用のあり方 / ddd-in-ai-era
minodriven
23
9k
Featured
See All Featured
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
RailsConf 2023
tenderlove
30
1.2k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Code Review Best Practice
trishagee
70
19k
Six Lessons from altMBA
skipperchong
28
4k
How STYLIGHT went responsive
nonsquared
100
5.7k
The Cost Of JavaScript in 2023
addyosmani
53
8.8k
For a Future-Friendly Web
brad_frost
179
9.9k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Site-Speed That Sticks
csswizardry
10
790
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͕͋ΔͷͰɺࢀߟʹ͢ΔͱΑ͍
͝ਗ਼ௌ͋Γ͕ͱ͏ ͍͟͝·ͨ͠