We no longer have the BuildBundlerMinifier to help us out, why we need something to execute the bundling and minification tasks. The only part missing now is building the bundles. The tag helper generates a nice list of individual files when running on localhost: Īnd a bundled, minified, and versioned file when running somewhere else:
Npm minify code#
To make sure that the browser always knows when to fetch an updated bundle, include a version number of the bundled file by adding the following code to the ConfigureServices method in the Startup.cs file: services.AddBundles(options => With this in place, you can replace all of the elements from the previous example with this: To use the tag helpers in cshtml files, insert the following code in the _ViewImports.cshtml file: *, BundlerMinifier.TagHelpers To combine these into one, there's a nice little NuGet package named BundlerMinifier.TagHelpers that we can install: dotnet add package BundlerMinifier.TagHelpersĪs the name suggests, this package comes with a range of ASP.NET Core tag helpers to help with bundling and minification. gitignore: # Don't include bundled files in gitĪs we already saw in the example code, we have a reference to both bootstrap.css and site.css in both the bundleconfig.json file and in the HTML file needing this (typically the _Layout.cshtml file). This way you can simply ignore this path in. The only change is the path in the outputFileName value which now avoids generating the bundled files inside the css and js folders. You can either create a set of wildcard URLs to exclude or you can move the generated bundles entirely like this: [ gitignore, since someone will end up generating these files locally either by mistake or to test out a problem only existing on the bundled files. You probably still want to exclude these files through. min files will not even exist in your local checkout. The solution suggested in this post is based on not building the minified bundles locally. If you have the BuildBundlerMinifier package installed, go ahead and uninstall it.
The first part doesn't require more explanation. In the following sections, I have a solution for each bullet. Minification and bundling should be done on the build server.The list of needed CSS and JavaScript files for each page should only be written once.Don't include the BuildBundlerMinifier package.This translates to a range of goals that I want to achieve with the solution presented in the rest of this post:
Npm minify install#
To have Visual Studio and dotnet build the bundles, you can install the BuildBundlerMinifier NuGet package: dotnet add package BuildBundlerMinifier I'll use only the CSS part in the rest of this post to simplify things, but everything applies to JavaScript files as well. In this example, we build a minified CSS bundle named and a minified JavaScript bundle named. For each bundle you want to create, there's a JSON object with an outputFileName and a set of files to include in the inputFiles array. "wwwroot/lib/bootstrap/dist/css/bootstrap.css", Here's an example of how the content could look like in the default template: [ To include bundling and minification, add a new file in the root of the web project named bundleconfig.json. In ASP.NET Core you typically add your static files in the Bundling and minification don't care where you place your files, but I tend to like this structure why the new elmah.io websites are based on it. The changes we made were from a baseline of the official docs, so let's dive in. I don't want to go into too much detail, since you can simply read through the documentation if you want. Let's start by looking at how the documentation suggests implementing bundling and minification in ASP.NET Core. In this post, I'll go through the possibilities we went through when migrating and what we ended up choosing. We used the namespace in ASP.NET MVC, combined with the AspNetBundling and BundleTransformer packages for some additional features like generating source maps. When migrating our websites to ASP.NET Core, we had to find a new way to bundle and minify JavaScript and CSS files.
0 kommentar(er)
