前置き

最近、gulpというのが流行っているらしい？これから流行ってくる？らしいので、使ってみました。
読み方は「ガルプ」と読むようです。

さて、gulpってなんでしょう。
→今度調べておきます。

というわけにもいかないので、ちょっとだけ分かったことを書いておきますと、「node.jsで動くビルドシステム」みたいなもの？よくわからないです。

ビルドシステムってこんなこんなことをしてくれる感じかな。

　

gulpの公式サイトに

The streaming build system

とあるように流れるようにビルドができるようです。
なので「ごくごく飲む」という意味の単語「gulp」なんですね。

同じような物でGruntがあるようです。

Gruntもよく分かってない状況ですので、比較はよく分かりません。

本題

さて、使ってみましょう。

1. node.jsのインストール

まずは、gulpはnode.jsで動くのでnode.jsをインストールします。
この辺を参考にすると良さそうです。

2. gulpのインストール

gulpを実行するユーザでgulpモジュールをグローバルに使えるモジュールとしてインストールします。

$ npm install -g gulp

3. gulpを実行したいディレクトリで環境設定

gulpを実行したいディレクトリでgulpが使えるようにします。今回は「try-to-gulp」というディレクトリで実行するとします。

$ mkdir try-to-glup
$ cd try-to-glup
$ npm init
$ npm install --save-dev gulp gulp-util

※npmはrubyでいうところのgemとかbundlerみたいなものだと思っています・・・。
※npm initするとことでpackage.jsonが作られます。これはbundlerでいうところのGemfileのような役割のようなものと考えればよいです。
package.jsonについては「npmとpackage.json使い方」が分かりやすいです

4. gulpfile.jsを作成する

gulpfile.jsはgulpでやりたいこと（task）をJavaScript形式で書いたプログラムで、これで細かなタスク処理を制御できます。

$ vi gulpfile.js

ファイル内容は以下。この例では「Hello World」と表示するだけです。

var gulp = require('gulp');
var gutil = require('gulp-util');

gulp.task('default', function(){
  // place code for your default task here
  console.log('Hello World.');
});

5. 実行する

$ gulp

※gulpコマンドでこのgulpfile.jsを実行できます。引数なしの場合はタスク名が「default」という部分が実行されます。

6. 実行結果


画像の中程に「Hello World.」というのが見えると思います。

ここまでではgulpのいいところ（流れるように処理をするところ）が活かされていませんし、面白くもないですよね。

少し応用

というわけで、もう少し実践的なことをやってみようと思います。

やってみたこと：特定のディレクトリの写真(画像)ファイルの拡張子をjpegからjpgに変更する

gulpではpipeという機能を使って処理結果を次の処理に引き渡すということができます。これが流れるように処理できる機能ですね。
今回の場合、「ファイルを開く→ファイルの拡張子を変更する→ファイルを保存する」というような感じになります。

1. gulpfile.jsを作る

このようなgulpfile.jsを作ります。

var path = require('path');
var map = require('map-stream');
var gulp = require('gulp');
var gutil = require('gulp-util');

gulp.task('default', function(){
  // place code for your default task here
  console.log('Hello World.');
});

gulp.task('change-jpeg-to-jpg', function(){
  gulp.src('./photo/*.jpeg')
    .pipe(changeExtensionFromJpegToJpg())
    .pipe(gulp.dest('./photo2/'));
});

function changeExtensionFromJpegToJpg() {
  return map(changeExtensionToJpg);
};

function changeExtensionToJpg(file, callback){
  if (file.isStream()) {
    return callback(new Error('Cannot do change extension on a stream'), file);
  }
  file.path = path.join(file.base, path.basename(file.path, path.extname(file.path)) + '.jpg');
  callback(null, file);
};

gulp.task(‘change-jpeg-to-jpg’, function)のところで「change-jpeg-to-jpg」というタスクの処理を定義しましたが、

1. gulp.src(‘./photo/*.jpeg’)でファイルを開く
2. .pipe(changeExtensionFromJpegToJpg())でそのファイルの拡張子を変更する
3. .pipe(gulp.dest(‘./photo2/’))でその結果をファイルに保存する

というようになっています。
しかし、リファクタリングしてないので酷いコードになってますねｗ

2. 「map-stream」モジュールをインストール

プログラム内で「map-stream」モジュールを利用しているので、

$ npm install --save-dev map-stream

で「map-stream」モジュールをインストールします。

3. 実行

「change-jpeg-to-jpg」というタスクに処理を定義したのでそのタスク名を指定して実行します。

$ gulp change-jpeg-to-jpg



4. 実行結果を確認

photoディレクトリにあったjpegファイルがphoto2ディレクトリにjpgファイルとしてコピーされていることを確認できます。
photo2ディレクトリがなかった場合は作られます。

gulpのAPIはこの辺（gulp API docs）に説明がありますので使い方はここを見ればよいですね！
gulpにはプラグインという機構があって、いろいろな方がプラグインを作成されています。
ここ（gulp plugins）でプラグインを探せますので、組み合わせていろいろできそうです。
処理部分のみプラグイン化して公開してみても面白そうですね。

またgulpfile.jsはCoffeeScriptで書くこともできるようです。

最後に

今回はgulpを使って、たくさんのファイルの拡張子を変更（jpeg→jpg）にするスクリプトを書いてみました。
少し調べた限りではこのようなgulp pluginを見つけられなくて、作ってみましたが、もう少し調べてみるとありました。

gulp-ext-replace – GitHub

なんという車輪の再発明！
しかし、車輪の再発明が技術習得の近道だなと、改めて感じました。

参考にしたサイト：

• 打倒Grunt！Node.js用の新たなビルドシステムgulpことはじめ – OpenWeb
• gulp-rename plugin – GitHub
• gulp-concat plugin – GitHub