使用grunt express-server和grunt-contrib-watch进行实时重新加载

使用grunt express-server和grunt-contrib-watch可以实现实时重新加载的功能。具体来说，grunt express-server是一个用于启动和管理Express服务器的插件，而grunt-contrib-watch是一个用于监视文件变化并执行相应任务的插件。

通过配置Gruntfile.js文件，可以实现以下步骤：

安装grunt和相关插件：

npm install -g grunt-cli
npm install grunt --save-dev
npm install grunt-express-server --save-dev
npm install grunt-contrib-watch --save-dev

在Gruntfile.js文件中配置grunt任务：

module.exports = function(grunt) {
  grunt.initConfig({
    express: {
      options: {
        // Express服务器的配置选项
      },
      dev: {
        options: {
          script: 'app.js' // 启动的入口文件
        }
      }
    },
    watch: {
      express: {
        files: ['app.js', 'routes/*.js'], // 监视的文件
        tasks: ['express:dev'], // 文件变化时执行的任务
        options: {
          spawn: false,
          livereload: true // 实时重新加载页面
        }
      }
    }
  });

  grunt.loadNpmTasks('grunt-express-server');
  grunt.loadNpmTasks('grunt-contrib-watch');

  grunt.registerTask('default', ['express:dev', 'watch']);
};