LT駆動開発 01 gulp入門にもならない何か

Transcript

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

2. 自己紹介　　 beatmania  IIDX   DanceDanceRevolu>on   REFLEC  BEAT   jubeat

     DanceEvolu>on   などをほどほどに •  松原和也   •  TwiFer  :  @Toro_kun   •  趣味   – 音ゲー  

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. 以上、   ありがとうございました。