The issue is that when the bundles are minified and I look at the Network tab in Chrome I see a 404 for only this url :
http://localhost:57000/bundles/underscore-min.map
No such directory exists.
If I remove the reference to underscore.js in the bundle then the 404 is for only this url :
http://localhost:57000/bundles/angular-sanitize.min.js.map
This doesn't happen in IE. I've moved the order around and there is always one file, and only one, that will generate the 404.
Here's my bundles that generate the issue.
bundles.Add(new ScriptBundle("~/bundles/scripts")
.Include("~/Scripts/angular/angular.js")
.Include("~/Scripts/angular/angular-resource.js")
.Include("~/Scripts/angular/angular-route.js")
.Include("~/Scripts/angular/angular-animate.js")
.Include("~/Scripts/angular/angular-touch.js")
.Include("~/Scripts/angular/angular-sanitize.js")
.Include("~/Scripts/ng-infinite-scroll.js")
.Include("~/Scripts/underscore.js")
.Include("~/Scripts/bootstrap.js")
.Include("~/Scripts/md5.js")
.IncludeDirectory("~/Scripts/app/", "*.js", true));
anyone seen this before?
Related
I have the following code which works fine on my local machine. Changes + build results in a new bundled file including the modified js code. However, when copied to our staging environment, an old version is being served up, so js changes are not seen.
Files copied include new dlls after a full rebuild + the changed js file. I've also recycled the web (even rebooted).
Even when I turn off optimisation, the staging site is still rendering the optimised script tag rather than a list of js files. Going off my head here.
Any ideas?
private void RegisterBundles()
{
BundleTable.Bundles.Add(new ScriptBundle("~/opt/code-scripts").Include(
"~/Scripts/ga.js",
"~/Scripts/jquery.unobtrusive*",
"~/Scripts/jquery.validate*",
"~/Scripts/code.js",
"~/Scripts/twitterFetcher.js",
"~/Scripts/tcode.js",
"~/Scripts/waypoints.js",
"~/Scripts/waypoints-sticky.js",
"~/Scripts/code-twitter.js"
));
BundleTable.Bundles.Add(new StyleBundle("~/opt/code-styles").Include(
"~/css/fonts.css",
"~/css/site.css"
));
BundleTable.EnableOptimizations = true;
}
...
#Scripts.Render("~/opt/code-scripts")
Internet Explorer has a fit when I try and render the minified TinyMCE bundle. So, in order to create a bundle that avoids minification, I followed these instructions to set up a "generic" or "basic" bundle in my BundleConfig:
bundles.Add( new Bundle( "~/Scripts/tinymce" )
.Include( "~/Scripts/tinymce/tinymce.min.js",
"~/Scripts/tinymce/jquery.tinymce.min.js" ) );
How do I render this on the page? None of the following seem to work:
#Bundles.Render( "~/Scripts/tinymce" )
#Bundle.Render( "~/Scripts/tinymce" )
#Bundle( "~/Scripts/tinymce" )
This renders the tag at least:
#Scripts.Render( "~/Scripts/tinymce" )
But it throws a 403 error when it tries to load the file:
"NetworkError: 403 Forbidden - http://localhost:1062/Scripts/tinymce/?v=MTojK5ORvAZmonNqNGJ3aWhOYyor-Fa8dZHTqfSOlUM1"
As pointed out in the comments, this question addresses part of the issue. Since you can't give your bundle a name that is also the name of an existing directory, I renamed it:
bundles.Add( new Bundle( "~/js/tinymce" )
.Include( "~/Scripts/tinymce/tinymce.min.js",
"~/Scripts/tinymce/jquery.tinymce.min.js" ) );
However, due to the way TinyMCE dynamically loads dependencies (plugin and theme files) I have to make sure all of that is included in the bundle as well:
bundles.Add( new Bundle( "~/js/tinymce" )
.Include( "~/Scripts/tinymce/tinymce.min.js",
"~/Scripts/tinymce/jquery.tinymce.min.js",
"~/Scripts/tinymce/plugins/autoresize/plugin.min.js",
"~/Scripts/tinymce/plugins/charmap/plugin.min.js",
"~/Scripts/tinymce/plugins/code/plugin.min.js",
"~/Scripts/tinymce/plugins/image/plugin.min.js",
"~/Scripts/tinymce/plugins/table/plugin.min.js",
"~/Scripts/tinymce/plugins/textcolor/plugin.min.js",
"~/Scripts/tinymce/themes/modern/theme.min.js") );
This means that if I wanted a new plugin it would require a code change and redeployment of bin files instead of a simple script update. However, the requirement for this application hasn't changed and probably won't any time soon (plus, it's an internal app), so this isn't really a problem.
Finally, TinyMCE also dynamically loads skin files (css, images and fonts). I can fix this by changing the TinyMCE configuration to specify the skin directory:
$('.tinymce').tinymce({
skin_url: '/Scripts/tinymce/skins/lightgray',
// other stuff...
});
I tried creating a bundle for the theme files:
bundles.Add( new Bundle( "~/css/tinymce" )
.Include( "~/Scripts/tinymce/skins/lightgray/*.css" ) );
And changing my configuration like so:
$('.tinymce').tinymce({
skin_url: '/css/tinymce',
// blah blah blah...
});
But, because TinyMCE looks for individual files, this did not work. It threw 404 errors for skin.min.css and content.min.css.
So now I have some of the TinyMCE files bundled, but not all of them. This is at least better than what I had before (separate HTTP requests for every single file).
Change your bundle name to something other than an existing location on disk
For example: Bundle( "~/Scripts/tinymce") to Bundle( "~/js/tinymce")
I trying to bundle scripts and styles bootstrap for my application. My debug is working But when I publish it, don't load scripts and styles.
I add a BundleConfig (BootstrapBundleConfig)
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/js").Include(
"~/Scripts/jquery-{version}.js",
"~/Scripts/jquery-ui-1.10.4.custom.js",
"~/Scripts/jquery-migrate-{version}.js",
"~/Scripts/bootstrap.js",
"~/Scripts/gridmvc.js",
"~/Scripts/gridmvc.lang.fa.js",
"~/Scripts/jquery.validate.js",
"~/scripts/jquery.validate.unobtrusive.js",
"~/Scripts/jquery.validate.unobtrusive-custom-for-bootstrap.js",
"~/scripts/entitypicker.js",
"~/scripts/js-persian-cal.js",
"~/scripts/json2.js",
"~/scripts/bootbox.js",
"~/Scripts/jalali.js",
"~/Scripts/calendar.js",
"~/Scripts/calendar-setup.js",
"~/Scripts/lang/calendar-fa.js"
));
bundles.Add(new StyleBundle("~/content/css").Include(
"~/Content/bootstrap.css",
"~/Content/bootstrap-responsive.css",
"~/Content/bootstrap-mvc-validation.css",
"~/Content/themes/ui-lightness/jquery-ui.css",
"~/Content/js-persian-cal.css",
"~/Content/entitypicker.css",
"~/Content/gridmvc.css",
"~/Content/aqua/theme.css",
"~/Content/calendar-system.css"
));
}
add register this in Global
BootstrapSupport.BootstrapBundleConfig.RegisterBundles(System.Web.Optimization.BundleTable.Bundles);
and set styles/script in _layaout
<link href="#Styles.Url("~/content/css")" rel="stylesheet" />
#Scripts.Render("~/js")
But when publish it, and open View Page Source
<link href="/Content/css?v=65vDyivXbF9ucPBBLls9CVnwUcCNass7hOMNUEXbN-I1" rel="stylesheet" />
and when open this file get error in first line.
/* Minification failed. Returning unminified contents.
(962,1): run-time error CSS1019: Unexpected token, found '#charset'
(962,10): run-time error CSS1019: Unexpected token, found '"UTF-8"'
(962,17): run-time error CSS1019: Unexpected token, found ';'
(994,1): run-time error CSS1019: Unexpected token, found '#-webkit-keyframes'
I search in google and used different methods, but the error is not resolved.
add all style to a special path (Content/Them/Bootstrap) and use new StyleBundle("~/content/Them/Bootstrap")
use BundleTable.EnableOptimizations = true;
other..
This usually occurs if your css files are not well formatted, put your css code to test using http://csslint.net/.
Also instead of using this line
<link href="#Styles.Url("~/content/css")" rel="stylesheet" />
you could use this
#Styles.Render("~/content/css")
If you want to debug this without publishing you could add this line to your RegisterBundles method of your BundleConfig:
BundleTable.EnableOptimizations = true;
This is the culprit #charset "UTF-8". Search through your css files and see if you can find it. This needs to be at the top of the bundled css file. i.e. At the top of the first CSS file in the bundle list. If it is not it will fail to minify.
It is often used when there are Unicode characters in the CSS file. And this is normally because of the use of an icon font like font awesome. But if you don't need it in your CSS file, then just take it out.
Your css has some 'problems' when minifying. this can be because of bad css or bad optimization.
Try to validate your CSS and see if you can spot the culprit.
For a workaround use BundleTable.EnableOptimizations = false which won't minify the css.
To 'debug' this on local host, change your web config and remove the attribute debug=true (this will make your css minify on your dev machine)
Also having different folder base on your bundle will make any relative url (like a background image) on your stylesheet to not work.
https://stackoverflow.com/a/19544226/2440976 -This is a dup question I believe - Here is likely the simple answer (It worked for me!)
(From answer) IIS Config>Authentication>RightClickOn Anonymous Auth>Click Edit> Check Application pool identity
Perhaps I'm missing something (I hope I am!), but it seems awfully clunky to have to have deal with the one-off root website files requested by the browser, such as favicon.ico and things like apple-touch-icon-precomposed.png (on the iPad). Right now, I'm getting a 500 server error whenever I encounter one of these for which I'm not explicitly serving up a file.
My questions:
Is there an up-to-date list of all such files for all major browsers that my webapp should be handling?
As a failsafe, is there way for the absence of any of these files to fail silently, i.e. to NOT get a 500 server error with the webapp continuing on its merry way, simply using a blank favicon or whatever?
I'm running a Django app on Heroku with gunicorn.
I never get a 500 error from invalid urls, because I use STATIC_URL and the class based RedirectView
Usually I have an app dedicated to this, and include it in the root urls.py with
#urls.py
include('oneoff.urls', name='oneoff')`
and
#oneoff/urls.py
urlpatterns = ( '',
url(r'favicon.ico$',
RedirectView.as_view(url=urlparse.urljoin(settings.STATIC_URL, "img/favicon.ico")),
name="favicon"
),
url(r'icon-precomposed.png',
RedirectView.as_view(url=urlparse.urljoin(settings.STATIC_URL, "img/iphone/icon.png")),
name="iphone"
),
)
then in the template
{% load url from future %}
<link rel="favicon" href="{% url 'oneoff:favicon' %} />
With the help of YSlow I'm trying to tune my pages a bit.
I thought it would be little effort for big gain to have my pages compressed.
After trying everything from here, here, here and here YSlow is still showing my pages are nog compressed.
I'm using asp.net mvc 1.0 on IIS6.
With the following rules in my global.asax I make sure that my static content is not handled by MVC.
routes.Clear();
// Turns off the unnecessary file exists check
routes.RouteExistingFiles = true;
// Ignore text, html, files.
routes.IgnoreRoute("{file}.txt");
routes.IgnoreRoute("{file}.htm");
routes.IgnoreRoute("{file}.html");
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
// Ignore the content directory which contains images, js, css & html
routes.IgnoreRoute("Content/{*pathInfo}");
//Exclude favicon (google toolbar request gif file as fav icon which is weird)
routes.IgnoreRoute("{*favicon}", new { favicon = #"(.*/)?favicon.([iI][cC][oO]|[gG][iI][fF])(/.*)?" });
This will make sure that my js and css files are statically accessible.
These are the relevant snips of my metabase.xml
<IIsCompressionScheme Location ="/LM/W3SVC/Filters/Compression/deflate"
HcCompressionDll="%windir%\system32\inetsrv\gzip.dll"
HcCreateFlags="0"
HcDoDynamicCompression="TRUE"
HcDoOnDemandCompression="TRUE"
HcDoStaticCompression="TRUE"
HcDynamicCompressionLevel="9"
HcFileExtensions="htm
html
txt
css
js
mvc"
HcOnDemandCompLevel="10"
HcPriority="1"
HcScriptFileExtensions="asp
dll
exe"
>
</IIsCompressionScheme>
<IIsCompressionScheme Location ="/LM/W3SVC/Filters/Compression/gzip"
HcCompressionDll="%windir%\system32\inetsrv\gzip.dll"
HcCreateFlags="1"
HcDoDynamicCompression="TRUE"
HcDoOnDemandCompression="TRUE"
HcDoStaticCompression="TRUE"
HcDynamicCompressionLevel="9"
HcFileExtensions="htm
html
txt
css
js
mvc"
HcOnDemandCompLevel="10"
HcPriority="1"
HcScriptFileExtensions="asp
dll
exe"
>
</IIsCompressionScheme>
(meta: not sure if I should be putting this on SO or on SF)
The problem is that compression is extension related, you need to specify all the extensions that should get either static or dynamic compression. You can probably see this by looking at the HcFileExtensions and HcScriptFileExtensions attributes respectively.
So with MVC shoe-horned into IIS6 where you don't necessarily have file extensions you will not be getting any compression for dynamic content. IIS7 does things differently since it uses a list of mimeTypes to trigger compression. IIS7 with integrated pipeline is where we're really expect to be placing MVC apps. In IIS6 its possible but its a kludge and compression is one of the casualties.
Edit
For static content on IIS6 bear in mind that compression happens on a separate thread and triggered after the first request to resource, the first request itself goes out uncompressed. Subsequent requests for the resource should then be supplied using the compressed version.