Replacing System.Web.Optimization Bundling of LESS/CSS when migrating to ASP.NET 5

Following on from my previous post I spent a bit time looking at how to bundle files in ASP.NET 5, since the existing bundling functionality in the System.Web.Optimization will no longer be available.

I actually had most of this post written and was checking over it prior to publishing it when Mads Kristensen posted that he has created two new extensions that replace some of the functionality from Web Essentials. One handles bundling and minifying JS/CSS/HTML, and the other handles compiling LESS/Sass/CoffeeScript.

Using these extensions seem like an easy way to replace the bundling functionality, however I have already introduced Gulp and my personal preference is to continue to use that. My reasons for this are that I think Gulp gives you better control over the process, is easier to integrate as part of the build process and it actually has more functionality at the moment (source maps are only available for .scss files currently).

The 3 main benefits of the bundling functionality to replace are

  • Bundling multiple files into a single file to reduce the number of requests required to load a page.
  • Minifying CSS and JavaScript files to reduce the size of responses from the web server.
  • Versioning the content by adding a parameter into the query string of requests allowing it to be cached while it has not changed.

Bundling

You may consider bundling CSS content together by using the @import rule to import all the content into a single file. This is how the bootstrap LESS is setup to compile for example. I do not think that this is a good approach, however.

If the @import is just in plain CSS, it will not bundle the content and the browser will end up making additional requests for the other content. The @import rule has to be used in LESS or Sass for it to actually create a single CSS bundle. Additionally to take advantage of intellisense in the Visual Studio editor you need to have references in the actual file you are working in.

All that is required to bundle CSS content using Gulp is an additional module, gulp-concat-css. First add a dependency to gulp-concat-css in your package.json file and install that module. An example package.json follows.

Then you need to pipe your LESS or CSS content through gulp-concat-css to group it into a single file. Be aware that you need to concatenate the CSS before generating the sourcemaps otherwise the task will error. An example of the gulpfile.js follows.

Minifying

Minifying the bundled files is also as simple as adding another gulp module and updating the task in your gulpfile. Add gulp-minify-css as a dependency in your package.json file similar to the following example.

In your less task make sure to minify the content after concatenating it all together, but before generating the sourcemaps. See the following example for reference.

Versioning

Now that you have Gulp set up to create minified bundles, the last step is to add versions to the bundles. Fortunately the Microsoft team have added this functionality as a tag helper for link and script element. By adding the asp-file-version=”true” attribute to these elements, .NET will append a query string version parameter to the content URL.

Dave Paquette has a great post explaining the tag helpers.

Hopefully this provides an understanding of how to replace the bundling functionality when upgrading to ASP.NET 5. I have looked at solving this problem for LESS/CSS content, but the process is the much same for JavaScript bundles only with different modules required for bundling and minifying the JavaScript.

Advertisements
Replacing System.Web.Optimization Bundling of LESS/CSS when migrating to ASP.NET 5