Gruntfile.js は常々長すぎると思っていました。複数ファイルに分割しようが長いものは長いです。

最近、後発の gulp というものを見つけて使ってみていますが、いい感じです。 設定ファイルが短く書ける上に、速いです。

先日 Grunt 入門の記事「Web デザイナーさん向け Grunt を使ったコーディング作業の効率化、はじめの一歩」を読んで、例の Gruntfile.js と同等の内容を gulp で書いたらどうなるかなと思って書いてみました。

67 行から 29 行に。約半減です。また、短くなっただけではなく、処理の流れがわかりやすくなっていると思います。

gulpfile.js

var gulp = require('gulp');
var concat = require('gulp-concat');
var prefixer = require('gulp-autoprefixer');
var minify = require('gulp-minify-css');
var imagemin = require('gulp-imagemin');
var plumber = require('gulp-plumber');
 
gulp.task('css', function () {
  gulp.src('htdocs/css/**/*.css')
      .pipe(plumber())
      .pipe(prefixer('last 2 version'))
      .pipe(concat('style.min.css'))
      .pipe(minify())
      .pipe(gulp.dest('htdocs/dist/css'));
});
 
gulp.task('img', function () {
  gulp.src('htdocs/img/**/*')
      .pipe(plumber())
      .pipe(imagemin())
      .pipe(gulp.dest('htdocs/dist/img'));
});
 
gulp.task('watch', function () {
  gulp.watch('htdocs/css/**/*', ['css']);
  gulp.watch('htdocs/img/**/*', ['img']);
});
 
gulp.task('default', ['css', 'img']);

そもそも gulp って？

gulp は Node.js の stream を使って Grunt の行っているようなことをもっとうまくやろうというものです。以下のような特徴があります。

設定ファイルの可読性: 例えば CSS に対して何の処理をするのか一目瞭然です。
スピード: タスクはできる限り並列に実行されるので速いです。中間ファイルも生成されません。
拡張性: プラグインが対応していないことをやりたければ、自分で少しプログラムを書くだけすみます。

そもそも stream って？

ざっくり言うと、データの流れを抽象化するためのインターフェイスだそうです。

ここでは詳しく説明しませんが gulp の開発者達は substack's stream handbook を読めと言っています。

gulp の stream は？

通常 gulp のタスクは、ざっくり言うと以下のような流れです。

gulp.src() でファイルの stream を作ります。
各プラグインが stream の中を流れるファイルを処理して、また stream に流します。
gulp.dest() で stream の中を流れてきたファイルを保存します。

ここで注意すべきは、gulp の扱う stream の中を流れるのは、ファイル一個に対応するオブジェクトだということです。具体的には vinyl という npm パッケージで決まっている File オブジェクトです。ざっくり言うと、ファイルのパスとファイルの中身の情報を持っています。

例えば htdocs/css/**/*.css にマッチする CSS ファイルが 3 つあったとすると、gulp.src('htdocs/css/**/*.css') は File オブジェクトを 3 つ流す stream を返します。

こうやってファイルに対応する object を stream に流すことで、複数のファイルをどんどん処理できるわけですね。

ちなみに 2. のところを厳密に言うと、各プラグインは、入ってくる File オブジェクトを変換して出す stream を作ります。いわゆる Transform Stream ですね。

プラグインは充実してるの？

あまりいろいろ試していないのですが、思いつくようなものはだいたいあるんじゃないでしょうか。

オフィシャルサイトのプラグインページ
あとは普通に npm で "gulp hoge" と検索

基本的には、もともとある npm パッケージをラップするだけなので、なければ誰かがすぐ作ってしまいます。

いざとなれば Grunt タスクを gulp から使うためのプラグインもあるようです。

使ってみよう

例を見ればすぐわかるシンプルさなので、ぜひためしに使ってみてください。

まだなら Node.js をインストール。
npm install -g gulp
プロジェクトに package.json がなければ npm init
npm install -save-dev gulp gulp-hoge で gulp と必要なプラグインを入れる。
gulpfile.js を書く。
gulp

ほしい機能のプラグインも、"gulp hoge" とかで検索すれば大抵すぐ出てきます。

そもそも gulp って？

そもそも stream って？

gulp の stream は？

プラグインは充実してるの？

使ってみよう

参考資料