Question

我正在使用 express.js 开发应用程序。此外，我使用 gulp 与 gulp-nodemon 和浏览器同步来简化我的开发并提供 *。js的自动更新， *。html 和 *。css 我正在处理项目的应用程序文件。

但我有问题！

当我对 *。css 或 *。html 文件进行更改时，浏览器同步会自动更新或自动重新加载立即在几毫秒内。但是当我对 *。js 文件进行更改时，自动重新加载需要几分钟。这是一个非常奇怪的行为！正如我观察到当我对 *。js 文件进行更改时浏览器同步尝试重新加载我正在努力完成获取请求的页面的本地主机：3000 即可。但是这个请求大约需要2分钟，并且在该页面重新加载并且应用了新的更改之后。

为什么重新加载页面需要这么长时间？以及如何解决这个问题？感谢您的帮助！

这是我的gulpfile.js

const gulp = require('gulp');
const nodemon = require('gulp-nodemon');
const browserSync = require('browser-sync').create();

gulp.task('default', ['browser-sync']);

gulp.task('browser-sync', ['nodemon'], function() {
    browserSync.init(null, {
        proxy: "http://localhost:3000",
        files: ["public/**/*.*", "views/**/*.*"],
        port: 7000
    });
});

gulp.task('nodemon', function(cb){
    var started = false;
    return nodemon({
        script: 'bin/www'
    }).on('start', function() {
        // to avoid nodemon being started multiple times
        if (!started) {
            cb();
            started = true;
        }
    });
});

这是关于开发工具的网络部分的快照。在这里，您可以看到在* .js文件更改后重新加载页面需要多长时间 image

Answer 1

我遇到了同样的问题。所以，我试着像这样改变我的gulpfile：

gulp.task('browser-sync', ['nodemon'], function() {

    browserSync.init(null, {
        proxy: "http://localhost:8080",
        //files: ["public/**/*.{css,html,js}"], //Commented
        browser: "google chrome",
        port: 8080
    });

    gulp.watch("public/**/*.{css,html,js}").on('change', browserSync.reload);
});

我希望它适合你。请试一试。

更改* .js文件后，页面重新加载非常缓慢（~30秒-2分钟）[express + gulp + gulp-nodemon + browser-sync]

1 个答案: