Question

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

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

我99％确定问题与服务器有关的是使用“build”文件或其他东西而不是/ 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文件所在的位置。

Imgur

如果有任何其他代码或信息可以让我更容易解决这个问题，请告诉我。谢谢。

更新：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”服务的内容而没有看到它的内容，但如果我的假设是正确的并且你正在提供“公共”目录的内容，那么你没有任何排序watch触发的任务有助于将已更改文件的内容复制到“公共”目录中。看起来这种情况最初发生在您的服务器启动时（通过运行build任务），但不会在发生更改时随后运行。

我建议修改您的监视任务，以便在文件更改时对文件执行某些与构建相关的任务。由于您的构建相关任务是将作为其作业的一部分的更改物理复制到“公共”目录，因此您应该最终看到更改的结果。以下是您的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

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

转到检查 -> 网络并确保选中禁用缓存。

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

Grunt Livereload没有显示HTML更改

2 个答案: