Task runner Build systemツールであるgulp 3.5がリリースされました。

変更点

gulp/CHANGELOG.md at master · gulpjs/gulp に変更点が幾つか載っていますが、
以下の2点は今までにgulpfileを書いてきた人は影響があると思います。(公式のreadmeとかもそうだったので)

  • added gulp.watch(globs, tasksArray) sugar
  • deprecate gulp.run

gulp.run が 以下のような議論/問題点を経て非推奨になっています。

そのため、以下のようなタスクを実装すると

gulp.task('default', function () {
    gulp.run('build');
});

gulp.run() has been deprecated. Use task dependencies or gulp.watch task triggering instead.

という警告が出るようになったと思います(3.5から)

これをどう書き換えるかというと、gulp.run ではなくて、gulp.task や gulp.watch にはタスク同士の依存関係を定義する方法があるので、そちらに書き換えます。

書き換え

npmとbrowserifyを使ったクライアントサイドのウェブアプリ開発 | Web scratch で紹介したazu/tech-video-rss-searcherを例に書き換えてみます。

書き換え前のgulpfile.jsは以下のような感じです。

var gulp = require('gulp');
var gutil = require("gulp-util")
var browserify = require('gulp-browserify');
gulp.task('build', function () {
    return gulp.src('./app/app.js', { read: false })
        .pipe(browserify({
            transform: ["debowerify"],
            debug: true
        }))
        .pipe(gulp.dest('./public/'));
});
gulp.task('watch', function () {
    gulp.run('build');
    gulp.watch('./app/**/*.js', function (event) {
        gulp.run('build');
    });
});

// alt : beefy app/app.js:public/app.js 8989 -- -t debowerify
gulp.task(“server”, function () {
var connect = require(“connect”);
connect().use(connect.static(__dirname)).listen(8989);
gulp.run(“watch”);
});
gulp.task('default', function () {
gulp.run('build');
});

これを元に、3.5向け(書き換えなくても警告がでるだけなので4.0がくるまでは動くと思いますが)に書き換えてみます。

gulp.taskの依存

最初に紹介したような gulp.task を実行するtaskの場合

gulp.task('default', function () {
    gulp.run('build');
});

これは、以下のように gulp.task の第二引数で依存するtaskに書き換えられます。

gulp.task('default', ['build']);

依存するtask + 処理の場合

gulp.task("server", function () {
    gulp.run("watch");
    var connect = require("connect");
    connect().use(connect.static(__dirname)).listen(8989);
});

これは以下のように書き換え出来ます。

gulp.task("server", ["watch"], function () {
    var connect = require("connect");
    connect().use(connect.static(__dirname)).listen(8989);
});

gulp.watch の依存関係

以下のように gulp.watch が gulp.run を読んでいる場合も同じように書き換えることが出来ます。

gulp.task('watch', function () {
    gulp.run('build');
    gulp.watch('./app/**/*.js', function (event) {
        gulp.run('build');
    });
});

gulp.watch も 第二引数に依存するtaskを渡すことで同様の処理を書けます。

gulp.task('watch', ['build'], function () {
    gulp.watch('./app/**/*.js', ['build']);
});

この時は build されてから、第三引数のfunctionが呼ばれます。

これで警告がでる部分がなくなりました

書き換え後 は以下のようになりました

var gulp = require('gulp');
var gutil = require("gulp-util")
var browserify = require('gulp-browserify');
gulp.task('build', function () {
    return gulp.src('./app/app.js', { read: false })
        .pipe(browserify({
            transform: ["debowerify"],
            debug: true
        }))
        .pipe(gulp.dest('./public/'));
});

gulp.task('watch', ['build'], function () {
gulp.watch('./app/**/*.js', ['build']);
});


// alt : beefy app/app.js:public/app.js 8989 -- -t debowerify
gulp.task(“server”, [“watch”], function () {
var connect = require(“connect”);
connect().use(connect.static(__dirname)).listen(8989);
});
gulp.task('default', ['build']);

Diffは以下で見られます。

今回の書き換えたtaskの依存関係の書き方については以下のドキュメントに書かれています。

おわりに

gulp 3.5のdeprecate gulp.run は、
gulp taskの依存関係のために gulp.run を使うのは辞めるべきという事で非推奨になったので、
gulp.run のような事を必要とする場面はまだあるとは思います。

そういう時は、gulpfileはただのJavaScriptであるということを思い出して、普通に関数を作ってみるといいのかもしれません。

If gulp was a task runner I would agree with you. gulp is a build system helper, the task system is out of necessity. We are trying to ween people off of this and onto vanilla JS stuff. JS has an awesome task running system called functions that works really well.

gulpはtask runnerではなく、build system helperであり、JavaScriptには関数と呼ばれるタスクを実行する仕組みが既にあるためdeprecateになった感じです。

gulpはAPIデザイン的な話が結構でてくるので見ていて面白い感じがします。