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

Question

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

Grund's livereload работает отлично в том смысле, что обнаруживает изменения в моих файлах HTML и обновляет страницу во время разработки. Однако фактические изменения не отражаются на странице. Если я выталкиваю файлы на сервер и перезагружаю общедоступный сайт, изменения там. Но я пока не вижу изменений во время разработки.

Я на 99% уверен, что проблема связана с тем, что сервер использует файлы «build» или что-то в этом роде, а не файлы, расположенные в/общей папке. Тем не менее, я новичок в использовании back-end и 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, который я вношу изменения.

Пожалуйста, дайте мне знать, если есть любой другой код или информацию я мог предусмотреть, что бы решить эту проблему проще. Спасибо.

Update: Содержание 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 для простого копирования файлов между каталогами.