gulp入門

にもならない何か

LT駆動開発01 LT	

Mar,	
  1st	
  2014	
  
松原和也	

です 

	
  
自己紹介  	
•  松原和也	
  
•  TwiFer	
  :	
  @Toro_kun	
  
•  趣味	
  
–  音ゲー	
  
beatmania	
  IIDX	
  
DanceDanceRevolu>on	
  
REFLEC	
  BEAT	
  
jubeat	
  
DanceEvolu>on	
  
などをほどほどに
さて
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	
  
以上、	
  
ありがとうございました。

Ltdd01gulp入門公開用資料