使用Grunt实现LiveReload的ASP.net MVC Web应用程序

Question

在grunt中是否可以监视文件并自动重新加载ASP.net MVC Web应用程序。或者livereload只能与通过grunt提供的文件一起使用。我发现了grunt插件“grunt-iisexpress”，但不确定是否可以将其与任务一起使用以在文件更改时重新加载ASP.net MVC Web应用程序。

我的Web应用程序中没有任何index.html作为起始页面，而是_ViewStart.cshtml，它启动整个应用程序。

- nimgrg

Answer 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应用程序中可用，只需将实时重新加载的片段添加到您的布局和/或视图中：

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

- Winston Fassett

---

你能提供更多细节吗？我想尝试设置它，但对于LiveReload和Node并不是很熟悉，不确定如何按照这些说明操作。当我尝试时，看起来像是在创建GIT存储库的分支或类似的东西？ - Ian

@Winston，我不明白 http://localhost:35729/livereload.js 是从哪里来的？ 我需要从我的 node-modules 中获取 grunt-contrib-watch 吗？ - eran otzap

@eranotzap 35729 是livereload服务器运行的默认端口。如果您想指定其他端口，您应该在选项中指定端口号，例如：options: { livereload: 4455 }，这将在端口4455上启动livereload服务器，并且您需要在Layouts.cshtml文件中包含<script src="http://localhost:4455/livereload.js"></script>。 - user2243747

Answer 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'
    ]
  }

所以任何关于视图或编译的更改，都会重新加载网站。

- user600314

---

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