I am using BundleTransformer to bundle and minify JS/CSS in a legacy ASP.NET WebForms app. However, I'd like to disable bundling if <compilation debug="true"> in Web.config.
Current Behavior: If debug=true, resources are still bundled together, but nothing is minified.
Desired Behavior: Bundling and minification only occur if debug=false. Otherwise, references to the individual scripts and stylesheets are rendered in the HTML.
Is this possible?
Below is an example of how I currently create one of the bundles:
BundleConfig.cs
var jsMinifier = new BundleTransformer.JsMin.Minifiers.CrockfordJsMinifier();
var customJsTransformer = new BundleTransformer.Core.Transformers.ScriptTransformer(jsMinifier);
var CustomJsBundle = new BundleTransformer.Core.Bundles.CustomScriptBundle("~/bundles/CustomJsBundle");
foreach (var item in jsFiles)
{
CustomJsBundle.Include(item);
}
CustomJsBundle.Transforms.Clear();
CustomJsBundle.Transforms.Add(customJsTransformer);
BundleTable.Bundles.Add(CustomJsBundle);
Navigation.master
<%# Master Language="C#" CodeFile="Navigation.master.cs" Inherits="Main_Nav" %>
<%# Import Namespace= "System.Web.Optimization" %>
<html>
<head runat="server">
<%= Scripts.Render("~/bundles/CustomJsBundle") %>
<!-- if debug=true, I'd like the server to just render references to the individual script files
instead of the bundle -->
</head>
<body>
<!-- other markup -->
</body>
</html>
The Scripts.Render call in Navigation.master always displays a bundle, even if debug is true. I'd like it to render the bundle only if debug is false. Otherwise, I'd like script tags to each individual script file rendered instead for debugging purposes.
I solved this for now by using the RenderFormat method when in DEBUG mode. Otherwise, I use the usual Render method.
For example, in my Navigation.master:
<% #if DEBUG %>
<%= Scripts.RenderFormat("<script src='{0}'/></script>", "~/bundles/CustomJsBundle") %>
<% #else %>
<%= Scripts.Render("~/bundles/CustomJsBundle") %>
<% #endif %>
This has the desired effect of:
In DEBUG mode, render script tags with the individual files.
Otherwise, a single script tag with the bundle is rendered.
I'm not sure if there is a better way to do this, but if so, please comment or submit an answer. I tried other potential solutions, such as setting EnableOptimizations to false, and clearing the BundleTable, but this is the only solution that has worked.
Related
I'm developing in asp.net using Master/content pages. I'm using Bundling by adding it to the Master page. I think I have everything set up correctly; however, when I'm developing I can no longer see my list of available classes on the content pages if I'm trying to set up html......without bundling a list of classes used to pop up when I'd get to the class= part; but with bundling nothing appears.
My setup looks like this, in the Master page I'm referencing the bundles:
<head runat="server">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><%: Page.Title %> - JCPS DMC</title>
<link href="~/favicon.ico" rel="shortcut icon" />
<asp:PlaceHolder ID="PlaceHolder2" runat="server">
<%: Styles.Render("~/bundles/bootstrapCSS", "~/bundles/utilitiesCSS") %>
<%: Scripts.Render("~/bundles/utilitiesJs", "~/bundles/modernizr") %>
</asp:PlaceHolder>
<asp:ContentPlaceHolder ID="contentHeader" runat="server">
</asp:ContentPlaceHolder>
</head>
And my BundleConfig.cs file looks like this:
using System.Web.Optimization;
namespace DMC
{
public class BundleConfig
{
// For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254726
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/WebFormsJs").Include(
"~/Scripts/WebForms/WebForms.js",
"~/Scripts/WebForms/WebUIValidation.js",
"~/Scripts/WebForms/MenuStandards.js",
"~/Scripts/WebForms/Focus.js",
"~/Scripts/WebForms/GridView.js",
"~/Scripts/WebForms/DetailsView.js",
"~/Scripts/WebForms/TreeView.js",
"~/Scripts/WebForms/WebParts.js"));
bundles.Add(new ScriptBundle("~/bundles/MsAjaxJs").Include(
"~/Scripts/WebForms/MsAjax/MicrosoftAjax.js",
"~/Scripts/WebForms/MsAjax/MicrosoftAjaxApplicationServices.js",
"~/Scripts/WebForms/MsAjax/MicrosoftAjaxTimer.js",
"~/Scripts/WebForms/MsAjax/MicrosoftAjaxWebForms.js"));
bundles.Add(new ScriptBundle("~/bundles/utilitiesJs").Include(
"~/Scripts/jquery-{version}.js",
"~/Scripts/bootstrap.js",
"~/Scripts/common.js",
"~/Scripts/analytics.js"));
bundles.Add(new ScriptBundle("~/bundles/highCharts").Include(
"~/Scripts/highcharts/4.2.0/highcharts.js",
"~/Scripts/highcharts/4.2.0/highcharts-more.js",
"~/Scripts/highcharts/4.2.0/highcharts-3d.js",
"~/Scripts/highcharts/4.2.0/modules/broken-axis.js",
"~/Scripts/highcharts/4.2.0/modules/data.js",
"~/Scripts/highcharts/4.2.0/modules/drilldown.js",
"~/Scripts/highcharts/4.2.0/modules/exporting.js",
"~/Scripts/highcharts/4.2.0/modules/funnel.js",
"~/Scripts/highcharts/4.2.0/modules/heatmap.js",
"~/Scripts/highcharts/4.2.0/modules/no-data-to-display.js",
"~/Scripts/highcharts/4.2.0/modules/offline-exporting.js",
"~/Scripts/highcharts/4.2.0/modules/solid-gauge.js",
"~/Scripts/highcharts/4.2.0/modules/treemap.js",
"~/Scripts/highcharts/4.2.0/adapters/standalone-framework.js"
));
// Use the Development version of Modernizr to develop with and learn from. Then, when you’re
// ready for production, use the build tool at http://modernizr.com to pick only the tests you need
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));
bundles.Add(new StyleBundle("~/bundles/bootstrapCSS").Include(
"~/Content/bootstrap.css",
"~/Content/bootstrap-multiselect.css",
"~/Content/bootstrap-navbar.css",
"~/Content/bootstrap-overrides.css"));
bundles.Add(new StyleBundle("~/bundles/utilitiesCSS").Include(
"~/Content/print.css",
"~/Content/common.css",
"~/Content/site.css",
"~/Content/colorThemes.css"));
BundleTable.EnableOptimizations = false;
}
}
}
That last line in the BundleConfig.cs file I thought was the key to debugging:
BundleTable.EnableOptimizations = false
I thought that if it was set to false, it overrode the web.config file and allowed you to see classnames...is this incorrect? Am I missing something else?
Here is the documentation for the property: BundleTable.EnableOptimizations Property. Enabling it will bundle and minify your scripts/css files, see Bundling and Minification for complete details. This provides for faster load times for your clients as there is less that is transmitted over the wire (less white space, line breaks etc). It makes client side script debugging more difficult because your whole script could be on a single line and your variable names in javascript are usually also shortened. It has nothing to do with server side code or the web.config.
No. You are not missing anything. According to MSDN you can also use,
<system.web>
<compilation debug="true" />
<!-- Lines removed for clarity. -->
</system.web>
Documentation clearly says that,
Unless EnableOptimizations is true or the debug attribute in the
compilation Element in the Web.config file is set to false, files
will not be bundled or minified.
Link: http://www.asp.net/mvc/overview/performance/bundling-and-minification
Within my Sinatra application I would like to serve a minified version of my css/js for production but in development keep my default setup (individual files). I'm not quite sure how to write this in the correct syntax but if I give a pseudo-example, it should show what I am trying to achieve.
layout.html.erb
<% if :environment == :development %>
<!-- stylesheet link tags here -->
<% elsif :environment == :production %>
<!-- minified versions of stylesheets -->
<% end %>
is it possible to conditionally set which stylesheets I want to use, or is there a better way of doing this?
I am trying this
<% if ENV['RACK_ENV] = 'development' %>
<!-- stylesheet link tags here -->
<% elsif ENV['RACK_ENV] = 'production' %>
<!-- minified versions of stylesheets -->
<% end %>
Is there a more efficient way than this?
I have not used it yet, but it looks like sinatra-assetpack would provide an excellent solution for your problem.
I currently have a website with a typical homepage that uses it's own css file and then the rest of the site using one other css file. Could anyone advise on the best way to tailor my Rails app to meet these requirements?
I currently have a welcome controller with a welcome css file but not sure how to link all my other controllers to a main css file.
Thanks
Just put all your css files in
app/assets/stylesheets
then in the views use:
<%= stylesheet_link_tag "the_css_file_name_with_no_extension" %>
Actually, css files and assets in general don't get associated with controllers, but with views.
I suggest you have a read to:
http://guides.rubyonrails.org/layouts_and_rendering.html
If you want to use your controllers, you can define a global variable, and use it to conditionally include different stylesheets in your application.html.erb.
Something like:
app/views/layouts/application.html.erb
<% if #css = "main" %>
<%= stylesheet_link_tag "main" %>
<% else %>
<%= stylesheet_link_tag "application" %>
<% end%>
where #css is set to "main" in your main controller.
in a web form I'm trying to get intellisense within a script tag BUT within some inline .net code
Running vstudio 2008 / c# / .net 3.5 / vista
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="WebUserControl1.ascx.cs"
Inherits="controls.WebUserControl1" %>
<%# Register src="utils/popup.ascx" tagname="popup" tagprefix="uc1" %>
<div>
<%=popup1.ClientID;%>
<script language="javascript" type="text/javascript">
var popId = <%="'" + popup1.ClientID%>';//no inetllisense here
//this wont work either
<%
string popid = popup1.ClientID;
//no intellisense here either - thinks it is javascript
%>
</script>
<uc1:popup ID="popup1" runat="server" />
</div>
I get intellisense in the first angle bracket, but within the script tag intellisense is picking up javascript intellisense - ie not recognising that I am actually doing some inline code.
Is there a syntax I can use to get this??
I don't know that this will fix it for you, but one part of the problem is that you're inside a javascript string literal. See if doing it this way helps:
<script language="javascript" type="text/javascript">
var popId = <%="'" + adzPopup1.ClientID%>';
</script>
For 2003 it seems this was a recognised issue
Not sure about 2008... but someone here has the same issue with MVC inline code, and the solution was to include
<%# Import Namespace="System.Web.Mvc.HtmlHelper" %>
in the .aspx page. Unfortunately I'm not sure what the equivalent for what you need would be.
edit: just read on MSDN - When IntelliSense Is Unavailable, that IntelliSense is unavailable when in a string literal - this could be your problem.
Intellisense does not work for JavaScript code in aspx pages
does anyone know of a good way of doing the following, I need to have available via CSS Links up to 5 CSS files in one, this is pretty bad for trips to the server.. but it helps me keep it organized...
At runtime i automatically consolidate and minify all css files into 1 ...
What i was wondering is how to have links to css files in my source at design time and different at runtime??
Is there some special workaround i can do with <% %> tags?
Thanks
You could have one link to the combined file in your HTML and use a build event to combine your separate ones in to the one file. That way, during dev you always see your neat separate files but the designer (and at runtime) will always see the combined file. The designer doesn't care of there is one or 5 files but you do. This way you don't have to do any conditional design-time only logic and your code will be cleaner.
I use if (false) with HtmlHelper extensions to achieve similar effects. It might look like:
<% if (false) { %>
<link href="../content/styles/jquery-ui.css" ...
<link href="../content/styles/site.css" ...
<% } %>
<%= Html.CSS( "jquery-ui.css", "site.css", ... ) %>
You can try the following in your view or master page:
1) Leave the min'ed CSS links in as they are
2) Use this conditional block to include the CSS files directly as needed for design time:
<% if (this.DesignMode) { %>
<link rel="stylesheet" type="text/stylesheet" href="css/styles.css" />
<% } %>