Question

我已经定义了一个gulp任务来监视.ts个文件，并在文件更改时编译打字稿。 BrowserSync然后检测js文件更改并重新加载页面。当我更改一些.ts文件并保存时，整个编译+文件更改检测过程有时需要30多秒到1分钟，这对我来说很重要。我不想等待1分钟的项目（真的不是那么大）来编译，它很快就会很烦人。

以下是我gulpfile.js中的相关部分：

gulp.task('typescript', function () {
    return gulp.src('app/**/*.ts')
        .pipe(plugins.sourcemaps.init())
        .pipe(plugins.typescript(tscConfig.compilerOptions))
        .pipe(plugins.tokenReplace({tokens:config[process.env.NODE_ENV || envDev]}))
        .pipe(plugins.sourcemaps.write('.'))
        .pipe(gulp.dest('app'));
});
gulp.task('watch:ts', function () {
    gulp.watch('app/**/*.ts', ['typescript']);
});
gulp.task('build', ['less', 'typescript']);
gulp.task('serve', ['build', 'watch:less', 'watch:ts'], function(cb) {
    browserSync.init({
        injectChanges: false, // workaround for Angular 2 styleUrls loading
        files: ['./**/*.{html,htm,css,js}'],
        server: {
            baseDir: './',
        },
        open: false
    });
});
gulp.task('build', ['less', 'typescript']);

如果我单独运行gulp typescript任务，我会在〜10s内编译它，这很好：

amaurymartiny$ gulp typescript
[23:32:57] Using gulpfile ~/Workspace/monbanquet/monbanquet-front-admin/gulpfile.js
[23:32:57] Starting 'typescript'...
(I truncated some typescript errors here)
[23:33:07] TypeScript: 29 semantic errors
[23:33:07] TypeScript: emit succeeded (with errors)
[23:33:07] Finished 'typescript' after 10 s
amaurymartiny$

现在问题来自我在开发时保存一些.ts文件。打字稿任务开始，编译为10秒，但打字稿任务没有完成，并且它会慢慢地将所有.js改变大约30秒。并且BrowserSync会检测到这些更改，因此会在这30秒内不断重新加载页面。

我在这里制作了截图视频，以便您可以看到现象：https://www.youtube.com/watch?v=r63zuDtQEeg。如您所见，BrowserSync检测文件更改的时间过长，有时会检测到相同的.js文件更改两次。

有人可以帮我解决这个问题吗？感谢。

Gulp + Typescript + Browsersync编译速度慢

0 个答案: