Posted at

変更入ったファイルのみトランスパイル等したかったので gulp-cached と gulp-remember を使った

More than 3 years have passed since last update.

Gulp初心者です。


gulpfile.js

gulp.task('transform', function () {

return gulp.src('./scripts/**/*.js')
.pipe(babel())
.pipe(react())
.pipe(gulp.dest('./dist'));
});

こんな感じで、watchifyでファイル監視して、gulp-babelgulp-reactを使ってトランスパイルとトランスフォームの処理を行っているのですが(babelifyのほうがいいのかな)、このタスクで現在2sec近くかかっていてなんかいい方法あるだろうと思って調べたら、

http://stackoverflow.com/questions/31712408/improving-build-time-with-gulp-and-babel

ありました。gulp-cachedgulp-remember使って、差分のみ処理行うようにできるよと。


gulpfile.js

gulp.task('transform', function () {

return gulp.src('./scripts/**/*.js')
.pipe(cached('transform-cache'))
.pipe(babel())
.pipe(react())
.pipe(remember('transform-cache'))
.pipe(gulp.dest('./dist'));
});

これまで毎回処理が走る度にこれくらい時間のかかっていたものが


[11:14:53] Finished 'transform' after 1.95 s

[11:15:15] Finished 'transform' after 1.42 s

[11:15:21] Finished 'transform' after 1.38 s

[11:15:27] Finished 'transform' after 1.57 s


以下のように確かに早くなっています(watch開始時にも処理を走らせているので初回は時間かかっている)


[11:13:05] Finished 'transform' after 1.93 s

[11:13:20] Finished 'transform' after 78 ms

[11:13:28] Finished 'transform' after 80 ms

[11:13:33] Finished 'transform' after 68 ms