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
LT駆動開発 01 gulp入門にもならない何か
Search
Kazuya Matsubara
March 01, 2014
Technology
2
500
LT駆動開発 01 gulp入門にもならない何か
LT駆動開発 #01で発表したLT資料です。
発表時の序盤の出落ちネタは公開するのに問題あるため、削除しております。
Kazuya Matsubara
March 01, 2014
Tweet
Share
More Decks by Kazuya Matsubara
See All by Kazuya Matsubara
LT駆動開発09 - Creative Commonsについてゆる〜く調べてみた
torokun
1
730
すごい合同勉強会2014 in 広島 懇親会LT
torokun
0
440
LT駆動開発08 - 無限のディスク領域を手に入れよう(妄想編)
torokun
0
96
やめよう「なるはや」
torokun
1
170
DevLOVE広島 第1回 その改善いつするの?
torokun
0
790
LT駆動開発04 5分では分からないTypeScriptのなんとか
torokun
0
980
LT駆動開発 03 写真を趣味にしてから学んだこと
torokun
0
640
LT駆動開発 02 一発ネタ
torokun
0
1k
Other Decks in Technology
See All in Technology
スタートアップで取り組んでいるAzureとMicrosoft 365のセキュリティ対策/How to Improve Azure and Microsoft 365 Security at Startup
yuj1osm
0
210
20241214_WACATE2024冬_テスト設計技法をチョット俯瞰してみよう
kzsuzuki
3
440
多領域インシデントマネジメントへの挑戦:ハードウェアとソフトウェアの融合が生む課題/Challenge to multidisciplinary incident management: Issues created by the fusion of hardware and software
bitkey
PRO
2
100
サイボウズフロントエンドエキスパートチームについて / FrontendExpert Team
cybozuinsideout
PRO
5
38k
社内イベント管理システムを1週間でAKSからACAに移行した話し
shingo_kawahara
0
180
GitHub Copilot のテクニック集/GitHub Copilot Techniques
rayuron
26
11k
re:Invent をおうちで楽しんでみた ~CloudWatch のオブザーバビリティ機能がスゴい!/ Enjoyed AWS re:Invent from Home and CloudWatch Observability Feature is Amazing!
yuj1osm
0
120
新機能VPCリソースエンドポイント機能検証から得られた考察
duelist2020jp
0
220
PHP ユーザのための OpenTelemetry 入門 / phpcon2024-opentelemetry
shin1x1
0
150
kargoの魅力について伝える
magisystem0408
0
200
podman_update_2024-12
orimanabu
1
260
How to be an AWS Community Builder | 君もAWS Community Builderになろう!〜2024 冬 CB募集直前対策編?!〜
coosuke
PRO
2
2.8k
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
Into the Great Unknown - MozCon
thekraken
33
1.5k
Making Projects Easy
brettharned
116
5.9k
A Tale of Four Properties
chriscoyier
157
23k
Faster Mobile Websites
deanohume
305
30k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Why Our Code Smells
bkeepers
PRO
335
57k
Building Better People: How to give real-time feedback that sticks.
wjessup
365
19k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
Rails Girls Zürich Keynote
gr2m
94
13k
How to train your dragon (web standard)
notwaldorf
88
5.7k
Transcript
gulp入門にもならない何か LT駆動開発01 LT です Mar, 1st 2014 松原和也
自己紹介 beatmania IIDX DanceDanceRevolu>on REFLEC BEAT jubeat
DanceEvolu>on などをほどほどに • 松原和也 • TwiFer : @Toro_kun • 趣味 – 音ゲー
さて
gulpとは • Node.jsで動くビルドシス テム • 「ガルプ」と読む(当社調べ) • 「ごくごく飲む」という意味
node.js …
アンケート
node.js
node.js 聞いたことある人!
node.js 聞いたことある人! 知ってる人!
node.js 聞いたことある人! 知ってる人! 使ったことある人!
node.jsとは hFp://nodejs.jp/index.html
Googleが開発するオープンソース のJIT Virtual Machine型の JavaScript実行エンジン V8を搭載
JavaScriptが動くのは何もブラウザ だけではないのです。
サーバサイドのサーバプログラム として動かせるのです
JavaScriptには Threadという概念がないのです。 その代わりコールバックという概念 があるのです。
JavaScriptを用いた Non-‐blocking I/O環境 「イベントループ」に強い
さて、話を戻して
gulpとは • Node.jsで動くビルドシス テム • 「ガルプ」と読む(当社調べ) • 「ごくごく飲む」という意味
gulp -‐ビルドシステム-‐ • The streaming build system • Makefileみたいなもの
ビルドシステムとは
ここにファイルがあるじゃろ? ( ^ω^) ⊃[ファ][イル]⊂
これを ( ^ω^) ⊃)[フ][イ](⊂
こうして ( ^ω^) ≡⊃⊂≡
こうじゃ… ( ^ω^) ⊃『リリースモジュール』⊂
The streaming build system
流れるようにビルド できる
流れるように???
Shellのパイプのように 処理の出力を 次の処理の入力と することができる
一例
LESSファイルをコンパイルしてCSSファイ ルにする場合 gulp.task(‘less’, func>on() {
gulp.src(‘public/less/**/*.less’) .pipe(less()) .pipe(gulp.dest(‘public/ stylesheets’)); });
LESSファイルをコンパイルしてCSSファイルにする場合 // lessファイルを読み込む gulp.src(‘public/less/**/*.less’)
// 読み込んだファイルをCSSにコンパイル .pipe(less()) // ディレクトリに出力 .pipe(gulp.dest(‘public/stylesheets’));
gulpの使い方の説明やイ ンストール方法は こちらが参考になります hFp://goo.gl/w7Z7YB hFp://goo.gl/2cWYrP
以上、 ありがとうございました。