Gruntfile.js は常々長すぎると思っていました。複数ファイルに分割しようが長いものは長いです。
最近、後発の gulp というものを見つけて使ってみていますが、いい感じです。 設定ファイルが短く書ける上に、速いです。
先日 Grunt 入門の記事「Web デザイナーさん向け Grunt を使った コーディング作業の効率化、はじめの一歩」を読んで、例の Gruntfile.js と同等の内容を gulp で書いたらどうなるかなと思って書いてみました。
67 行から 29 行に。約半減です。また、短くなっただけではなく、処理の流れがわかりやすくなっていると思います。
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" とかで検索すれば大抵すぐ出てきます。