node.js - Gulp - バンドルされた js ファイルでの gulp.watch のパフォーマンスを改善

Question

ファイルに変更を加えるたびに、ブラウザーの livereloading のパフォーマンスに問題がありjsます。私のgulpセットアップでは、次の時計があります。

gulp.task('watch', function() {
    gulp.watch(config.paths.html, ['html']);
    gulp.watch(config.paths.js, ['js', 'lint']);
    gulp.watch(config.paths.css, ['css']);
});

jsしたがって、ファイルが変更されるたびに、jsおよびlintタスクがトリガーされます。それらは次のとおりです。

gulp.task('js', function() {
    browserify(config.paths.mainJs)
        .transform(reactify)
        .bundle()
        .on('error', console.error.bind(console))
        .pipe(source('bundle.js'))
        .pipe(gulp.dest(config.paths.dest + '/scripts'))
        .pipe(connect.reload());
});

gulp.task('lint', function() {
    return gulp.src(config.paths.js)
        .pipe(lint({config: 'eslint.config.json'}))
        .pipe(lint.format());
});

この設定では、jsファイル変更時の livereload はスケーリングしません。プロジェクトが大きくなるにつれて、ライブ リロードに時間がかかります。約 12 個の JS ファイルを含む小さなプロジェクトでも、リロードあたり 3.8 秒かかります。

問題は、jsファイルが変更されるたびに、プロジェクト内のすべてのファイルを反応させてバンドルしていることです。これは高価な操作であり、変更したファイル以外のjsすべてのファイルに対して完全に冗長です。jsライブ リロードを処理するより良い方法は何ですか? webpack がホット モジュール リロードを使用していることは知っていますが、これにgulp相当するものはありますか?