Grunt Livereload 不显示 HTML 更改

Question

在我的 MEAN 堆栈应用程序中，我尝试对 HTML 视图文件进行更改，并在使用 Grunt 的 livereload 进行更改时查看这些更改。

Grunt 的 livereload 工作正常，因为它检测我的 HTML 文件中的更改并在开发过程中刷新页面。 但是，实际更改并未反映在页面上。 如果我将文件推送到服务器上，并重新加载公开可用的站点，则更改就在那里。 但是我在开发过程中仍然看不到变化。

我 99% 肯定问题与服务器有关，是使用“构建”文件或其他文件，而不是位于 /public 文件夹中的文件。 但是，我是使用后端和 MEAN 堆栈的新手，无法弄清楚浏览器显示的文件或该文件的位置。 任何人都可以就如何确定浏览器显示的文件以及我可以做些什么来显示我所做的 HTML 更改提供任何指导？

如果有帮助，这是我的 gruntfile。 我正在更改的以下文件是 watchFiles.clientViews。

'use strict';

module.exports = function(grunt) {
    // Unified Watch Object
    var watchFiles = {
        serverViews: ['app/views/**/*.*'],
        serverJS: ['gruntfile.js', 'server.js', 'config/**/*.js', 'app/**/*.js'],
        clientViews: ['public/modules/**/views/**/*.html'],
        clientJS: ['public/js/*.js', 'public/modules/**/*.js'],
        clientCSS: ['public/modules/**/*.css'],
        mochaTests: ['app/tests/**/*.js']
    };

    // Project Configuration
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        watch: {
            options: { livereload: true },
            serverViews: {
                files: [watchFiles.serverViews],
                options: {
                    livereload: true
                }
            },
            serverJS: {
                files: watchFiles.serverJS,
                tasks: ['jshint'],
                options: {
                    livereload: true
                }
            },
            clientViews: {
                files: watchFiles.clientViews,
                options: {
                    livereload: true,
                }
            },
            clientJS: {
                files: watchFiles.clientJS,
                tasks: ['jshint'],
                options: {
                    livereload: true
                }
            },
            clientCSS: {
                files: watchFiles.clientCSS,
                tasks: ['csslint'],
                options: {
                    livereload: true
                }
            }
        },
        jshint: {
            all: {
                src: watchFiles.clientJS.concat(watchFiles.serverJS),
                options: {
                    jshintrc: true
                }
            }
        },
        csslint: {
            options: {
                csslintrc: '.csslintrc',
            },
            all: {
                src: watchFiles.clientCSS
            }
        },
        uglify: {
            production: {
                options: {
                    mangle: false
                },
                files: {
                    'public/dist/application.min.js': 'public/dist/application.js'
                }
            }
        },
        cssmin: {
            combine: {
                files: {
                    'public/dist/application.min.css': '<%= applicationCSSFiles %>'
                }
            }
        },
        nodemon: {
            dev: {
                script: 'server.js',
                options: {
                    nodeArgs: ['--debug'],
                    ext: 'js,html',
                    watch: watchFiles.serverViews.concat(watchFiles.serverJS)
                }
            }
        },
        'node-inspector': {
            custom: {
                options: {
                    'web-port': 1337,
                    'web-host': 'localhost',
                    'debug-port': 5858,
                    'save-live-edit': true,
                    'no-preload': true,
                    'stack-trace-limit': 50,
                    'hidden': []
                }
            }
        },
        ngAnnotate: {
            production: {
                files: {
                    'public/dist/application.js': '<%= applicationJavaScriptFiles %>'
                }
            }
        },
        concurrent: {
            default: ['nodemon', 'watch'],
            debug: ['nodemon', 'watch', 'node-inspector'],
            options: {
                logConcurrentOutput: true,
                limit: 10
            }
        },
        env: {
            test: {
                NODE_ENV: 'test'
            }
        },
        mochaTest: {
            src: watchFiles.mochaTests,
            options: {
                reporter: 'spec',
                require: 'server.js'
            }
        },
        karma: {
            unit: {
                configFile: 'karma.conf.js'
            }
        }
    });

    // Load NPM tasks
    require('load-grunt-tasks')(grunt);

    // Making grunt default to force in order not to break the project.
    grunt.option('force', true);

    // A Task for loading the configuration object
    grunt.task.registerTask('loadConfig', 'Task that loads the config into a grunt option.', function() {
        var init = require('./config/init')();
        var config = require('./config/config');

        grunt.config.set('applicationJavaScriptFiles', config.assets.js);
        grunt.config.set('applicationCSSFiles', config.assets.css);
    });

    // Default task(s).
    grunt.registerTask('default', ['lint', 'concurrent:default']);

    // Debug task.
    grunt.registerTask('debug', ['lint', 'concurrent:debug']);

    // Lint task(s).
    grunt.registerTask('lint', ['jshint', 'csslint']);

    // Build task(s).
    grunt.registerTask('build', ['lint', 'loadConfig', 'ngAnnotate', 'uglify', 'cssmin']);

    // Test task.
    grunt.registerTask('test', ['env:test', 'mochaTest', 'karma:unit']);
};

此外，这是我的 MEAN 堆栈的文件结构。 下面突出显示的是我要更改的 HTML 文件所在的位置。

请让我知道我是否可以提供任何其他代码或信息，以便更轻松地解决此问题。 谢谢你。

更新：Server.js 的内容

这是我的 server.js 内容：

'use strict';
/**
 * Module dependencies.
 */
var init = require('./config/init')(),
    config = require('./config/config'),
    mongoose = require('mongoose');

/**
 * Main application entry file.
 * Please note that the order of loading is important.
 */

// Bootstrap db connection
var db = mongoose.connect(config.db, function(err) {
    if (err) {
        console.error('\x1b[31m', 'Could not connect to MongoDB!');
        console.log(err);
    }
});

// Init the express application
var app = require('./config/express')(db);

// Bootstrap passport config
require('./config/passport')();

// Start the app by listening on <port>
app.listen(config.port);

// Expose app
exports = module.exports = app;

// Logging initialization
console.log('MEAN.JS application started on port ' + config.port);

Answer 1

如果不查看“server.js”的内容，就很难确切地说出它在提供什么服务，但是如果我的假设是正确的并且您正在提供“public”目录的内容，那么您就没有任何任务由watch触发，便于将更改的文件的内容复制到“公共”目录中。 看起来这种情况最初发生在您的服务器启动时（通过运行build任务），但随后不会在发生更改时运行。

我建议修改您的监视任务，以便在文件更改时对文件执行一些与构建相关的任务。 由于与构建相关的任务是将更改物理复制到“public”目录作为其工作的一部分，因此您最终应该会看到更改的结果。 这是您的watch任务列表的示例，该列表已修改以在更改时复制您的 JS 和 CSS 文件：

watch: {
    options: { livereload: true },
    serverViews: {
        files: [watchFiles.serverViews],
        options: {
            livereload: true
        }
    },
    serverJS: {
        files: watchFiles.serverJS,
        tasks: ['jshint', 'loadConfig', 'ngAnnotate', 'uglify'],
        options: {
            livereload: true
        }
    },
    clientViews: {
        files: watchFiles.clientViews,
        options: {
            livereload: true,
        }
    },
    clientJS: {
        files: watchFiles.clientJS,
        tasks: ['jshint', 'loadConfig', 'ngAnnotate', 'uglify'],
        options: {
            livereload: true
        }
    },
    clientCSS: {
        files: watchFiles.clientCSS,
        tasks: ['csslint', 'cssmin'],
        options: {
            livereload: true
        }
    }
},

最后一件事：假设您的视图在更改后不需要对它们进行任何修改，您可以在更改时直接将它们复制到公共目录。 看看grunt-contrib-copy用于在目录之间进行简单的文件复制。

Answer 2

我遇到了同样的问题，并通过禁用网络选项卡中的缓存来解决它

转到 Inspect -> Network 并确保选中禁用缓存。

希望这对将来的人有所帮助:)