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.
- Versioning the content by adding a parameter into the query string of requests allowing it to be cached while it has not changed.
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 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.
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.