Grunt Livereload не показывает изменения HTML

В моем приложении стека MEAN я пытаюсь внести изменения в файлы представления HTML и увидеть эти изменения, когда я их делаю, используя livereload Grunt.

Livereload Grunt работает нормально в том смысле, что он обнаруживает изменения в моих 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);

person Himmel    schedule 27.11.2014    source источник


Ответы (2)


Трудно точно сказать, что обслуживает ваш «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 для простого копирования файлов между каталогами.

person Edward Coyle Jr.    schedule 27.11.2014
comment
См. мое добавление содержимого моего server.js выше. Я НЕ думаю, что приложение обслуживает содержимое моей общей папки. Я редактирую содержимое общей папки напрямую, и изменения не отражаются... - person Himmel; 02.12.2014
comment
Кроме того, лучшее, что я могу сказать, это то, что grunt обслуживает файлы в /app, а не в общедоступных, должен ли я изменить файл grunt, чтобы отразить это? - person Himmel; 02.12.2014

Я столкнулся с той же проблемой и решил ее, отключив кеш на вкладке сети.

Перейдите в «Проверить» -> «Сеть» и убедитесь, что установлен флажок «Отключить кеш».

Надеюсь, это поможет кому-то в будущем :)

person haidar    schedule 10.06.2021