1. gulp入門
にもならない何か
LT駆動開発01 LT
Mar,
1st
2014
松原和也
です

2. 自己紹介
• 松原和也
• TwiFer
:
@Toro_kun
• 趣味
– 音ゲー
beatmania
IIDX
DanceDanceRevolu>on
REFLEC
BEAT
jubeat
DanceEvolu>on
などをほどほどに

3. さて

4. gulpとは
• Node.jsで動くビルドシス
テム
• 「ガルプ」と読む(当社調べ)
• 「ごくごく飲む」という意味

5. node.js
…

6. アンケート

7. node.js

8. node.js
聞いたことある人！

9. node.js
聞いたことある人！
知ってる人！

10. node.js
聞いたことある人！
知ってる人！
使ったことある人！

11. node.jsとは
hFp://nodejs.jp/index.html

12. Googleが開発するオープンソース
のJIT
Virtual
Machine型の
JavaScript実行エンジン
V8を搭載

13. JavaScriptが動くのは何もブラウザ
だけではないのです。

14. サーバサイドのサーバプログラム
として動かせるのです

15. JavaScriptには
Threadという概念がないのです。
その代わりコールバックという概念
があるのです。

16. JavaScriptを用いた
Non-­‐blocking
I/O環境
「イベントループ」に強い

17. さて、話を戻して

18. gulpとは
• Node.jsで動くビルドシス
テム
• 「ガルプ」と読む(当社調べ)
• 「ごくごく飲む」という意味

19. gulp
-­‐ビルドシステム-­‐
• The
streaming
build
system
• Makefileみたいなもの

20. ビルドシステムとは

21. ここにファイルがあるじゃろ？
(
＾ω＾)
⊃[ﾌｧ][ｲﾙ]⊂

22. これを
(
＾ω＾)
⊃)[ﾌ][ｲ](⊂

23. こうして
(
＾ω＾)
≡⊃⊂≡

24. こうじゃ…
(
＾ω＾)
⊃『ﾘﾘｰｽﾓｼﾞｭｰﾙ』⊂

25. The
streaming
build
system

26. 流れるようにビルド
できる

27. 流れるように？？？

28. Shellのパイプのように
処理の出力を
次の処理の入力と
することができる

29. 一例

30. LESSファイルをコンパイルしてCSSファイ
ルにする場合
gulp.task(‘less’,
func>on()
{
gulp.src(‘public/less/**/*.less’)
.pipe(less())
.pipe(gulp.dest(‘public/
stylesheets’));
});

31. LESSファイルをコンパイルしてCSSファイルにする場合
//
lessファイルを読み込む
gulp.src(‘public/less/**/*.less’)
//
読み込んだファイルをCSSにコンパイル
.pipe(less())
//
ディレクトリに出力
.pipe(gulp.dest(‘public/stylesheets’));

32. gulpの使い方の説明やイ
ンストール方法は
こちらが参考になります
hFp://goo.gl/w7Z7YB
hFp://goo.gl/2cWYrP

33. 以上、
ありがとうございました。