I am currently working with web optimization bundler that is part of the .net framework that bundles up both my javascript and css in to a single file. This works nicely.
I have run in to a problem with it though. See the following code:
BundleTable.Bundles.Add(new ScriptBundle("mybundle").Include(
"~/Scripts/globalize.js",
"~/Scripts/jquery.validate.js",
string.Format("~/resources.axd")));
This bundles up all the javascript from the files but also I would like to bundle the output from my .axd http handler. This returns javascript. However the javascript never gets included in the bundle. If I run the handler in my browser, no issue, javascript is returned.
I am wondering maybe the bundler does not recognize the .axd extension and therefore does not attempt to request the file. Any ideas if this is the case and the work around?
Correct, you can only include files into bundles, it will not make requests to the axd for you. What you can do is manually hit the axd, and save the file to disk and include that into your bundle.
I just wrote a script bundle for resx - you can find the source here
https://github.com/MrAntix/sandbox-resx-script-bundling
In BundleConfig, add your bundle ...
bundles.Add(
new ResxScriptBundle("~/bundles/local")
.Include<JsResources>("app")
);
It creates a model for each resource like this ...
window.resources=window.resources||{};
window.resources.app = {
"HelloWorld": "Hello World, from JSResources.resx"
};
And you can use it in your JS like this ...
$("h1").append(window.resources.app.HelloWorld);
... for example
Related
I've created a basic angular project using yeoman's angular generator. While the standard Grunt process is fine in general, I do have my concerns with the way how the views get all minified into the same JS File.
If I have about 10 views on my Page, the requested view can't be seen until 'all' pages have been loaded, since their all in the same file.
I now want to modify the Grunt process, so that each HTMLviewfile get minified into its own file in a views directory. The main angular router should now request the view files as they are requested by the client (user).
Is there any way you could help me. All my research has resulted that the module 'grunt-angular-templates' is responsible for minification of all HTML views. I've yet to find out, how to keep the files from getting merged into a single file.
Thanks!
I found out, that in order to not minify all the view files into the script.js file, you have to remove the ngtemplate process from you gunt build task
This is how I include JavaScript files in my ASP.NET MVC application,
Bundles.Add(new ScriptBundle(ConfigBundles.Scripts).Include
(
"~/Content/Scripts/Libraries/framework-{version}.js",
"~/Content/Scripts/Libraries/controls-{version}.js"
));
My understanding is that whenever I do a new release where the referenced JavaScript files have changed, i just need to increment the version number so that user's web browsers know that they need to clear the existing cache and request the new file.
However, this same process does not seem to work for stylesheets - this is how I load them:
Bundles.Add(new StyleBundle(ConfigBundles.Styles)
.Include("~/Content/Styles/Site-{version}.css", new CssRewriteUrlTransform()));
However, this does not seem to work - when I change the name of the Site.css to include a version, the bundling doesn't seem to detect it. Furthermore, in most guides on bundling they just talk about using this feature with Scripts - I haven't seen anyone confirm that it can used with styles as well...
Am I going about this the right way?
I have a project that is using ASP.NET Bundling. I am having an issue where the .map files are throwing an error on the client side even though I have explicitly excluded them from the bundling using the ignore list.
bundles.Add(new ScriptBundle("~/bundles/stuff").IncludeDirectory(
"~/Scripts/stuff/", "*.js", true));
bundles.IgnoreList.Ignore("*.map");
When I run the project I get a 500 error with the following message:
The view 'The controller for path '/stuff/Charting.js.map' was not
found or does not implement IController.' or its master was not found
or no view engine supports the searched locations.
How do I get this to properly ignore the .map files in the directory while bundling?
If I understand you correctly you shouldn't be having any real issues.
.map files allow a browser to download a full version of the minified JS. It is really for debugging purposes.
The .map missing shouldn't a problem. You only know it is missing, as the browser has had its Developer tools opened and is just informing you that the JS debugging won't be as good as it could be.
This is why libraries like jQuery have the full, the minified and the map file too.
See this article for a full explanation of .map files.
Alternatively, you could actually include the .map files in your project.
I have minified CSS and JS files that are auto-generated by Web Essentials, and auto-updated every time I update and save the original files.
What would be the best way to automatically toggle the actual (script/import) references within HTML between original (in Dev/Test) and minified (in Production) files?
This is within an MVC ASP.NET web app.
One idea would be to have server-side tags that render either ".min" or empty string based on an environment variable. But I'm wondering if there's a better, smarter, easier, more efficient way of handling this.
Thanks in advance.
Update:
My style bundle is defined like this:
bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site{version}.css"));
And I reference it like this:
#Styles.Render("~/Content/css")
However, this renders the following:
<link href="/Content/css?v=" rel="stylesheet"/>
It works fine if I take "{version}" out of bundle definition, but renders an empty "v=" if I include "{version}".
Update 2:
I just realized that due to certain complexities of the application, I can't use the bundling solution. What other options do I have?
Bundling will help you in this instance. You should already be able to see an example in your BundleConfig.cs file in App_Start.
Here is a tutorial on how to conifgure it http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification
From that tutorial, this is how you actually configure the bundles themselves, the files that will be in them, etc. This includes any jquery in the scripts folder into a bundle called ~/bundles/jquery.
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
// Code removed for clarity.
BundleTable.EnableOptimizations = true; // <-- this line overrides the debug check to show you the minified version even in debug mode... remove it for normal .min in debug/un-minned when not in debug behaviour
}
You then reference these from your views using
#Scripts.Render("~/bundles/jquery")
This will then render a script tag with the .min version of the jquery if you're not in debug or leave it out if you are. There needs to be a .min version and an un-minified version in the same scripts folder (which you should have if Web Essentials is creating the .min for you.
You could actually stop using Web Essentials to do the minification if you use ScriptBundles as they will minify the javascript for you when it packages it into the bundle.
For your update
The "~/Scripts/jquery-{version}.js" means match any file in the scripts folder that starts with jquery- and ends with .js and has some version number between. If the files don't have a version number in them, then don't try and use the {version} substitution.
They do it with jquery in this case so that if you upgrade the version of jquery that you are using, you don't have to go back into your BundleConfig and manually change the file name for your jquery reference.
If your file was named site1.3.7.css, then this would probably work.
bundles.Add(new StyleBundle("~/Content/css")
.Include("~/Content/site{version}.css"));
but it sounds more likely that you just need site.css.
bundles.Add(new StyleBundle("~/Content/css")
.Include("~/Content/site.css"));
I'm not sure what you think prevents you from using them but you can link to files in CDNs and minify or not minify. Even just have individual files in a bundle to get the benefit of minification outside of debug without "bundling" them. So there's probably a way.
We have legacy code to maintain and, to solve a specific customer customization problem, we want to route calls to some files to other files. That is, when the app calls a particular ASPX, it will end up hitting another ASPX.
If you call:
www.foo.com/admin/admin.aspx
It will actually hit:
www.foo.com/customizations/customer1/admin/admin.aspx
This is not a good design but this is legacy code. We just want to solve this.
We are using the System.Web.Routing framework to solve it. This works fine when you set RouteExistingFiles to true, except for static files (CSS, JavaScript and Images).
When I first tried it, it retrieved this error:
There is no build provider register for the extension '.css'.
So I did register a build provider in the web.config file for the .css extension. I used this build provider: PageBuilderProvider because someone recommended it in the internet.
It works! But the CSS is being served with text\html content type.
How do I achieve this?
TL;DR: I want to use routes in ASP.NET Web Forms to make a call for a specific CSS file to actually retrieve another one. A customer needs this for customization.
Try coding a HttpHandler. I had to do something similar but for PDF files, I coded a custom HttpHandler in the end - works very well. You can even set the content type in the HttpHandler code and have a pattern matched path the handler will be used for in the web.config. You can also configure it in web.config not to execute if the path does not point to an existing file e.g. so a 404 is returned without having to code that in the handler itself. I can't post my code (VB.NET) ATM because I'm using a tablet but google search for tutorials. You will also probably need to use the TransmitFile function to actually write out the css file. Is it a web forms project or web site? If its a web site there is a special way of registering the HttpHandler in the web.config.