gulp 3.5でgulp.runがdeprecatedになりました
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
が 以下のような議論/問題点を経て非推奨になっています。
- Avoid promoting gulp.run by robrich · Pull Request #162 · gulpjs/gulp
- 要はタスクの依存関係のために
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/docs/API.md at master · gulpjs/gulp
- gulp/docs/recipes/running-tasks-in-series.md at master · gulpjs/gulp
- 内部的に使ってるモジュール robrich/orchestrator
おわりに
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デザイン的な話が結構でてくるので見ていて面白い感じがします。
お知らせ欄
JavaScript Primerの書籍版がAmazonで購入できます。
JavaScriptに関する最新情報は週一でJSer.infoを更新しています。
GitHub Sponsorsでの支援を募集しています。