10

watchify が変更を検出するたびに、バンドル時間が遅くなります。私のgulpタスクに何か問題があるに違いありません。誰でもアイデアはありますか？

gulp.task('bundle', function() {
    var bundle = browserify({
            debug: true,
            extensions: ['.js', '.jsx'],
            entries: path.resolve(paths.root, files.entry)
        });

    executeBundle(bundle);
});

gulp.task('bundle-watch', function() {
    var bundle = browserify({
        debug: true,
        extensions: ['.js', '.jsx'],
        entries: path.resolve(paths.root, files.entry)
    });

    bundle = watchify(bundle);
    bundle.on('update', function(){
        executeBundle(bundle);
    });
    executeBundle(bundle);

});

function executeBundle(bundle) {
    var start = Date.now();
    bundle
        .transform(babelify.configure({
            ignore: /(bower_components)|(node_modules)/
        }))
        .bundle()
        .on("error", function (err) { console.log("Error : " + err.message); })
        .pipe(source(files.bundle))
        .pipe(gulp.dest(paths.root))
        .pipe($.notify(function() {
            console.log('bundle finished in ' + (Date.now() - start) + 'ms');
        }))
}
4

1 に答える 1

39

これと同じ問題があり、環境変数DEBUGをbabelに設定して調査しました。例えば：

$ DEBUG=babel gulp

デバッグ出力を調べた後、babelify が変換を複数回実行していることに気付きました。

原因は、バンドルが実行されるたびに実際に変換を追加したことです。あなたは同じ問題を抱えているようです。

移動

.transform(babelify.configure({
    ignore: /(bower_components)|(node_modules)/
}))

内部からexecuteBundleタスクに。new は次のbundle-watchように記述できます。

gulp.task('bundle-watch', function() {
    var bundle = browserify({
        debug: true,
        extensions: ['.js', '.jsx'],
        entries: path.resolve(paths.root, files.entry)
    });

    bundle = watchify(bundle);
    bundle.transform(babelify.configure({
        ignore: /(bower_components)|(node_modules)/
    }))
    bundle.on('update', function(){
        executeBundle(bundle);
    });
    executeBundle(bundle);
});
于 2015-04-27T12:39:23.330 に答える