スポンサードリンク

前置き

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

gulp_js_-_the_streaming_build_system

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

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

ビルドシステムってこんなこんなことをしてくれる感じかな。
噂のnode_jsのビルドシステムgulpを使ってみた「gulpでHello World」-- Toroとトロは電子機械の夢を見るか

 

gulpの公式サイト

The streaming build system

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

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

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

本題

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

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

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

    $ npm install -g gulp
    
  5. gulpを実行したいディレクトリで環境設定
  6. 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使い方」が分かりやすいです

  7. gulpfile.jsを作成する
  8. 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.');
    });
    
  9. 実行する
  10. $ gulp
    

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

  11. 実行結果
  12. gulpでHello World
    画像の中程に「Hello World.」というのが見えると思います。

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

少し応用

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

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

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

  1. gulpfile.jsを作る
  2. このような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/’))でその結果をファイルに保存する

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

  3. 「map-stream」モジュールをインストール
  4. プログラム内で「map-stream」モジュールを利用しているので、

    $ npm install --save-dev map-stream
    

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

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

    $ gulp change-jpeg-to-jpg
    

    gulp-change-extention

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

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

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

最後に

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

gulp-ext-replace – GitHub

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

参考にしたサイト:

スポンサードリンク