CODEWITHSUNDEEP
asp.net-mvcgruntjsgrunt-contrib-watch
nimgrg
nimgrg

Reputation: 582

LiveReload ASP.net MVC web app with Grunt

Is it possible in grunt to watch files and automatically reload a ASP.net MVC web application. Or does livereload only work with files served through grunt. I have come across grunt plugin 'grunt-iisexpress' but not really sure if I can use it, in conjunction with tasks to reload a ASP.net MVC webapp when a file has changed.

I do not have any index.html as a starting page in my web app but _ViewStart.cshtml which kicks off the whole application.

Upvotes: 10

Views: 2758

Answers (2)

Winston Fassett
Winston Fassett

Reputation: 3620

It is possible. I just got live-reloading in my ASP.NET app using grunt-contrib-watch (https://github.com/gruntjs/grunt-contrib-watch). It only took a few minutes.

I used this article as a guide: http://www.aliirz.com/javascript/2013/12/25/Live-Reload-with-Grunt/.

Do this via a command prompt in the ASP.NET app's folder.

1. Install grunt-contrib-watch

If you don't yet have a package.json file and want to save your dependencies in one: 

npm init

Then add Grunt and grunt-contrib-watch to your project:

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

2. Configure Grunt

Next create a Gruntfile.js in that same folder. Here's mine:

  '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. Run live reload server

Run your live-reload server alongside your ASP.NET app:

grunt watch

4. Add Snippet to ASP.NET

Finally, to enable it in your ASP.NET app, simply add the live-reload snippet to your Layouts and/or Views:

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

Upvotes: 9

user600314
user600314

Reputation: 662

I came across this generator for mvc : https://github.com/has606/generator-aspnetmvc Perhaps you could do something like the grunt file in the project :

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

So any changes to views or compilation, reloads the site

Upvotes: 3

Related Questions