使用 Grunt 重新加载 ASP.net MVC Web 应用程序答案

【问题标题】：LiveReload ASP.net MVC web app with Grunt使用 Grunt 重新加载 ASP.net MVC Web 应用程序
【发布时间】：2013-11-25 13:49:25
【问题描述】：

是否可以在 grunt 中监视文件并自动重新加载 ASP.net MVC Web 应用程序。还是 livereload 仅适用于通过 grunt 提供的文件。我遇到了 grunt 插件“grunt-iisexpress”，但不确定我是否可以使用它，以及在文件更改时重新加载 ASP.net MVC webapp 的任务。

我的网络应用程序中没有任何 index.html 作为起始页面，但 _ViewStart.cshtml 会启动整个应用程序。

【问题讨论】：

标签： asp.net-mvc gruntjs grunt-contrib-watch

【解决方案1】：

这是可能的。我刚刚使用 grunt-contrib-watch (https://github.com/gruntjs/grunt-contrib-watch) 在我的 ASP.NET 应用程序中进行了实时重新加载。只用了几分钟。

我以这篇文章为指导： http://www.aliirz.com/javascript/2013/12/25/Live-Reload-with-Grunt/.

通过 ASP.NET 应用程序文件夹中的命令提示符执行此操作。

1。安装 grunt-contrib-watch

如果您还没有 package.json 文件并希望将依赖项保存在一个文件中：

npm init

然后将 Grunt 和 grunt-contrib-watch 添加到您的项目中：

npm install --save-dev  grunt grunt-contrib-watch

2。配置 Grunt

接下来在同一个文件夹中创建一个Gruntfile.js。这是我的：

  'use strict';
  module.exports = function (grunt) {
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.initConfig({
      watch: {
        views: {
          files: [
              'Views/**/*.cshtml', 
              'Scripts/**/*.js',
              'Content/**/*.css',
              'Content/images/**/*',            
              'bin/**/*.dll'
          ],
          options: {
            livereload: true,
          }
        }
      }
    });
  }

3。运行实时重载服务器

在您的 ASP.NET 应用程序旁边运行您的实时重载服务器：

grunt watch

4。将代码段添加到 ASP.NET

最后，要在您的 ASP.NET 应用程序中启用它，只需将 live-reload sn-p 添加到您的布局和/或视图中：

<script src="http://localhost:35729/livereload.js"></script>

【讨论】：

您能在这里提供更多细节吗？我想尝试设置它，但对 LiveReload 和 Node 相当不熟悉，我不确定如何遵循这些说明。当我尝试时，它看起来像是在创建 GIT 存储库或类似的分支？
@Winston 我不明白localhost:35729/livereload.js 来自哪里？我需要从我的节点模块下的 grunt-contrib-watch 中获取它吗？
@eranotzap 35729 是 livereload 服务器运行的默认端口。如果要指定任何其他端口，则应在选项中指定端口号，例如options: { livereload: 4455} 这将在端口 4455 上启动 livereload 服务器，您需要在 Layouts.cshtml 文件中包含

【解决方案2】：

我遇到了这个 mvc 生成器：https://github.com/has606/generator-aspnetmvc 也许你可以在项目中做一些类似 grunt 文件的事情：

livereload: {
    options: {livereload: 32684},
    files: [
      '<%%= yeoman.app %>/Content/**/*.css',
      '<%%= yeoman.app %>/Scripts/**/*',
      '<%%= yeoman.app %>/Content/images/**/*',
      '<%%= yeoman.app %>/Views/**/*.cshtml',
      '<%%= yeoman.app %>/bin/**/*.dll'
    ]
  }

因此，对视图或编译的任何更改都会重新加载站点

【讨论】：

看起来它几乎可以工作。明天我会试一试，谢谢。