gulp 入門

phi phi on gulp

gulp の使い方についてのメモです.
導入について最小限にまとめました.

gulp はもう分かったよって方はこちらもどうぞ

gulp-logo

gulp とは

公式によると

The streaming build system

ストリーミングビルドシステム. ピンとこないですねw

ざっくりと言うと, grunt と同じようなタスク自動化ツールです.

grunt と何が違うの?

grunt は基本的に JSON でタスクを指定していく形式なのに対し,
gulp は node.js の stream という仕組みを使っており, A をやった後 B をやって...
といった形でタスクをつなげていく形でタスクを実行することができます.

小さなプロジェクトでは, grunt でもスッキリと書けるのですが, タスクの種類が増えたり, 複数のタスクが連なったようなタスクを書く際にどうしてもコードが煩雑になります.

大規模なプロジェクトの場合, minify, unify はもちろんのこと, 独自のタスクの入り混じった複雑なタスクってのがザラです.

そういったときに, pipe の仕組みを使えば並列であれ直列であれ順序が明確になるのでとても見通しが良くなります.

grunt の特徴

  • json で頑張る
  • ドキュメントやプラグインが充実してる

gulp の特徴

  • 並列処理得意
  • 追加でコード書きやすい
  • 生 node.js っぽい

Getting Started

gulp の導入方法です.

1. gulp をグローバルパッケージとしてインストールしよう

下記のコマンドを実行

$ npm install -g gulp

これで gulp コマンドが使えるようになります. gulp -v でバージョンが出れば成功してます.

2. プロジェクトに gulp をインストールしよう

package.json がない場合は npm init して
作っておく.

下記のコマンドを実行

$ npm install --save-dev gulp

開発用モジュールとして登録されます. package.json の "devDependencies" ってプロパティに "gulp" ってのが
追加されているのがわかるかと思います.

3. gulpfile.js を作ろう

プロジェクトのルートに gulpfile.js という ファイルを作ります.

中身はこんな感じ

var gulp = require('gulp');

gulp.task('default', function() {  
    console.log("デフォルトタスクだよー");
});

gulp.task('hoge', function() {  
    console.log("ほげタスクだよー");
});

4. gulp を実行しよう

下記で default タスクを実行

$ gulp

'デフォルトタスクだよー'って表示されるのがわかるかと思います.

gulp <タスク名> で特定のタスクを実行することができます.

$ gulp hoge

'ほげタスクだよー'って表示されるのがわかるかと思います.

gulp 導入例

上の導入サンプルだとぱっと見, 便利さがわからないかなと 思ったので, jade/coffee/less で構成されたプロジェクトを gulp でビルドする例を作ってみました.

[github]

使っているモジュールはこんなかんじ

  • gulp-coffee ... coffeescript を js に変換
  • gulp-jade ... jade を html に変換
  • gulp-less ... less を css に変換
  • gulp-rename ... 名前をリネーム
  • gulp-uglify ... js を minify
  • gulp-webserver ... 簡易ウェブサーバー

gulpfile.js の中身はこんな感じです.

/*
 * gulpfile
 */

var gulp = require("gulp");  
var rename = require("gulp-coffee");  
var jade = require("gulp-jade");  
var uglify = require("gulp-uglify");  
var coffee = require("gulp-coffee");  
var less = require("gulp-less");  
var webserver = require("gulp-webserver");

gulp.task("default", ["server", "watch"]);  
gulp.task("build", ["script", "style", "html"]);

gulp.task("script", function() {  
  gulp.src('./coffee/**/*.coffee')
    .pipe(coffee())
    .pipe(uglify())
    .pipe(gulp.dest('./build'))
    ;
});

gulp.task("style", function() {  
  gulp.src('./less/**/*.less')
    .pipe(less())
    .pipe(gulp.dest('./build'))
    ;
});

gulp.task("html", function() {  
  gulp.src('./jade/**/*.jade')
    .pipe(jade({
      pretty: true,
      locals: {
        title: "grunt test"
      }
    }))
    .pipe(gulp.dest('./build'))
    ;
});

gulp.task("watch", function() {  
  var targets = [
    './coffee/**/*.coffee',
    './style/**/*.style',
    './jade/**/*.jade',
  ];
  gulp.watch(targets, ['build']);
});

gulp.task("server", function() {  
  gulp.src('build')
    .pipe(webserver({
      livereload: true,
    }));
});

下記コマンドで
./jade, ./coffee, ./less のコードをそれぞれを
html, javascript, css に変換して ./build に出力します.

$ git clone https://github.com/phi-jp/gulp-test.git
$ cd gulp-test
$ npm install
$ gulp build

また, 下記コマンドでサーバーを立ち上げた後に http://localhost:8000 にアクセスすると watch, livereload できるようになります.

$ gulp

これだけでもなんとなく便利だなーってのがわかってもらえると思います.