javascript - Grunt Livereload 不显示 HTML 更改

Question

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

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

我 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 触发的任务有助于将更改文件的内容复制到“公共(public)”目录中。看起来这最初是在您的服务器启动时发生的(通过运行 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
        }
    }
},

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