Monday, November 26, 2012

Bundling and Minification with VS 2012

In my previous post I have explained how to do bundling and minification in general way. But in this post I'm going to tell how to do bundling and minification using VS 2012. And also this will continue the demo from the previous post.
Add Web Essentials 2012 for the VS 2012 using Extensions and Updates.
In the MVC project select the three script files and right click. Select, Create JavaScript Bundle File as below. And give an appropriate name for the bundle.
This will create a bundle file. If change any of the dilanA.js, dilanB.js or dilanC.js then the bundle file will get updated.
In the default view of the DemoController refer the JavaScript file as below. That's it in VS 2012 for bundling and minification.

Advantage of the map File

The js.map file contains the source maps for each JavaScript file. But when we debug the code it's difficult to debug the minified the code. But currently some browsers are supporting for the map file debugging. In Google Chrome go to Settings and check the Enable Source Maps. Though you bundle and minified the JavaScript files, you can easily debug the JavaScript Source files. Not the minified JavaScript file.


No comments:

Post a Comment