0

I am using the WebEssentials 2013 plugin to minify my js files and I am assuming whenever I build the application in release mode it has to take the minified file rather than the original file. This is not happening with my MVC 4 application. Does anyone have any clue on this issue?

Note: I have already done the below change in BundleConfig.cs:

#if !DEBUG
            BundleTable.EnableOptimizations = true;
#endif


Scripts 
    Projects 
        Project.js.bundle
               Project.min.js
                  Project.min.js.map

Project.js.bundle file

<bundle>
  <settings>
    <minify>true</minify>
    <runOnBuild>true</runOnBuild>
    <outputDirectory />
  </settings>
  <files> 
    <file>/Scripts/Project/CreateProject.js</file>
    <file>/Scripts/Project/ViewProject.js</file>
    <file>/Scripts/Project/EditProject.js</file>
    <file>/Scripts/Project/CloseProject.js</file>
  </files>
</bundle>

I have four views like Create Project, View Project, Edit Project, Close Project.

Can I use the bundle for every view or just use a minified file in each view? Which is the best option? I don't know how to include a bundle in my view. Can you provide me with the syntax?

RJ Cuthbertson
  • 1,458
  • 1
  • 20
  • 36
user5075511
  • 421
  • 1
  • 5
  • 11
  • And how are you referencing your bundles in your views? – RJ Cuthbertson Aug 27 '15 at 19:20
  • MVC should actually minify them for you, when you run in release mode, if you use bundles :) - see [This link](http://www.asp.net/mvc/overview/performance/bundling-and-minification) – VisualBean Aug 27 '15 at 19:23
  • @RJCuthbertson I have updated my question, kindly look at my question again and answer me. Thanks a ton in advance. – user5075511 Aug 27 '15 at 19:37
  • `@Scripts.Render` or `@Styles.Render` are the Razor methods to include bundles. Here's a good article to get you started with the basics of bundling in MVC: http://timgthomas.com/2012/09/a-quick-start-of-asp-net-mvc-4s-bundling/ – RJ Cuthbertson Aug 27 '15 at 20:21
  • @RJCuthbertson I want something like the below, if my application is being build under release mode, then my min js file needs to be referred in my view but if the same application has been rendered in the debug mode, i just want to call the raw js file. Can you suggest the piece of code which i need to write in my view(.cshtml)? – user5075511 Aug 27 '15 at 20:49
  • 1
    I've provided you that. To include the script, register a bundle and then use `@Scripts.Render("/yourbundlepath")` in your view to include it. In debug mode it won't minify, in release it will. I highly recommend you read that quick start article that I linked in my previous comment. – RJ Cuthbertson Aug 28 '15 at 00:42

2 Answers2

2

I think you're confusing two different tools here.

WebEssentials 2013 can auto-minify on build, but you'd need to actually reference the minified file to use it.

Example:
<script src="/js/yourjs.min.js"></script>

Your BundleTable.EnableOptimizations line is using System.Web.Optimization bundles. If you use script or style references to your bundles rather than to the JS or CSS files directly, you will notice the behavior works as you anticipate.

Example:
@Scripts.Render("/bundles/yourbundle")

See Bundling and Minification for more information

RJ Cuthbertson
  • 1,458
  • 1
  • 20
  • 36
  • Which one would be best for performance and which one help me to do reverse source mapping in production if i want to debug? – user5075511 Aug 27 '15 at 19:39
  • There isn't a definitive answer to that question as it depends entirely on your scenario. Both tools minify your code, though the Optimization library also lets you bundle files together to reduce the number of requests needed to load the same resources. Source maps aren't provided OOTB with the Optimization library, but you can reference this SO question: http://stackoverflow.com/questions/20431036/reconciling-asp-net-script-bundles-and-source-maps for information regarding how to achieve this. I prefer the Optimization library personally, but that's an opinion rather than a fact. – RJ Cuthbertson Aug 27 '15 at 20:17
1

When you use WebEssentials 2013 plugin with is generating *.min.js you need to reference min file directly like script src="myscripts.min.js"

or you can reference them with condition if like

#if (DEBUG)
           script src="myscripts.js"
#elif (RELEASE)
          script src="myscripts.min.js"
#endif
Janusz Nowak
  • 2,595
  • 1
  • 17
  • 36