Bundling css javascript Gzip

In MVC prior to .net core, bundling of CSS and Javascript was largely handled by the server through it's Bundling classes. in .net core, there is no server-side bundling, everything is done through other css/javascript bundling systems.

The Baseline uses Bundler & Minifier to bundle its various CSS and Javascript.

Default Bundles

The bundleconfig.js file contains the baseline's default bundles. It has the following bundles:

• HeaderStyles.min.css: Styles for the site
• HeaderJS.min.j: Javascript files that are loaded in the head, should keep these to a minimum, but if you use jQuery usually that is declared in the head so any $ javascript commands will operate.
• FooterJS.min.js: The majority of the javascript files that are loaded in the footer.
• jqueryval.min.js: jQuery Validators that operate alongside MVC's data annotation attributes and their html rendering
• jquery-unobtrusive-ajax.min.js: jQuery plugin for ajax handling using data attributes.

You can modify the contents of these tools. There are also HeaderCustom.js, Custom.js, Custom.css files that are part of these bundles that you can add your custom content to easily.

Development

In the _layout you'll notice various <environment> tag helpers, either including or excluding Development. The idea is that if you are developing, you should load all the CSS / Javascript unminified so you can more easily debug / make adjustments. Be sure to add your css files to thes Development areas along with the bundles.

Visual Studio Tools

You should install Web Essentials extension on your visual studio if you do not already have it. This contains the tools to detect css/javascript changes and recomplie your bundles.

GZip

The baseline also has systems put in place to allow Gzip handling of css / javascript. If your file ends with js.gz or css.gz, it will properly set the headers, this results in a MUCH faster download of css/javascript files.