This section shows how to bundle and minify files using the Bundler & Minifier Visual Studio extension as well as BundlerMinifier.Core.
- [Instructor] Bundling and minification has changed in ASP.NET Core and it's done with either a Visual Studio extension called Bundler & Minifier or through the BundlerMinifierCore package, which works with the .NET Core Command-Line Interface. When using the Visual Studio extension, it includes a file watcher that watches the bundleconfig.json file and will update the bundles for you any time that file changes.
You can also set bundle on build, which is going to prompt you for a NuGet package, and I'll show you that shortly. And you can set bindings with Task Runner Explorer. Let's look at that now. So, we pop over to Visual Studio. The extension is called Bundler & Minifier. The name just recently changed. It was on one word, BundlerMinifier, but now it's Bundler & Minifier, so you can see what the latest version is. And the way the bundles are configured is by specifying an outputFileName and then an array of input files, and wildcards are permitted as well.
And then you can optionally specify whether you want the minified as well or generate a source map. To set Task Runner Explorer, and if you don't have it loaded, you could just type task runner in the Quick Launch. But I right-click on Update all files, go to Bindings, and specifying After Build. Do the same thing with Clean. Right-click and specifying Before Build, and if somebody asks to have their project cleaned.
Additional settings for Bundler & Minifier can be set by right-clicking on the project, go into Bundler & Minifier. You can force it to update here. You can delete 'em. Check that if you want Bundler & Minifier to actually produce the output files and you can go Convert to Gulp, which I don't cover in this course. If you would like bundle on build configured, then you right-click on the bundleconfig.json file, go back to Bundler & Minifier menu and check the box that says Enable bundle on build.
When you check this box the first time, you'll get a prompt to ask you to install an additional NuGet package. When you say yes, you will then have bundle on build turned on. BundlerMinifierCore is a NuGet package. So, if you want to find the current version, we go to Manage NuGet Packages and we'll type in bundlerminifier. It's easy enough to bring it up, and it does.
And if we try to install this, this is one of those places where the Visual Studio tooling is lacking, so the best thing to do is to make note of the version number, 2.6.362. And then we can go into the project, right-click, and a new feature in Visual Studio 2017 allows you to edit the project file from within Visual Studio. This is a huge improvement over prior versions of Visual Studio where you had to use some external text editor.
So, we go down to the bottom. We find this new type called DotNetCliToolReference and that installs a .NET Core CLI tool for us. It's called BundlerMinifier.Core as you see here and the version I am currently running on the correct version. Now that we have that installed, and just as a side note, it need to be in a different ItemGroup than all of the other package references.
So, all the DotNetCliToolReferences go into their own ItemGroup. Then I can go into Package Manager Console or a command prompt, change to the directory of the ASP.NET Core app, so we'll change to that directory. And then if we want to bundle or clean, we just type dotnet bundle.
And if we want to remove all the bundles, we just type in dotnet bundle clean. So there you have it, very simple bundling and minification, either from Visual Studio or the .NET Core CLI.
- Running and debugging ASP.NET Core applications
- Pros and cons of migrating existing applications to ASP.NET Core.
- Built-in dependency injection
- Environment awareness and app configuration
- Web host configuration and SSL
- View components invoked as tag helpers
- Configuration and logging
- Using Razor Pages