Friday, March 27, 2015

Using Grunt in ASP.net 5 project

We will continue this with the code which I have done in my last post.
What is Grunt? Grunt is an open-source tool that you can use to build all of the frontend resources for your project.
In this demo, I will mainly use Grunt for JavaScript minification.
There are three types of Package Managers in Visual Studio 2015.

  • Nuget
We use Nuget for manage .net packages like ASP.net MVC, EntityFramework and etc. We define those packages in project.json file.
  • NPM(Node Package Manager)
We can manage NPM packages from this and we have to define those packages in package.json file.
  • Bower
This is a front end package manager, which we can use for Angular JS, JQuery, Bootstrap and etc.

First we will define Grunt package in NPM. For that we need to add NPM file like below.
Change the content of package.json file like below. It will add, NPM packages  into the project.
Add Grunt.js file and change content of that file for JavaScript minification process. This code will minify all javscript files in Scripts folder and create app.js file in wwwrootUglify combines JavaScript files according to the order they have defined in Grunt Configuration.
Add Scripts folder and add a javascript file into that folder. Open Task Runner in Visual Studio.
Run Uglify command. This will create app.js minified file in wwwroot folder.
It's easier if you bind the Uglify command to automatically run in After Build.

No comments:

Post a Comment