Options for CSS and JS Bundling and Minification with ASP.NET Core

Maria and I were updating the NerdDinner sample app (not done yet, but soon) and were looking at various ways to do bundling and minification of the JSS and CS. There's runtime bundling on ASP.NET 4.x but in recent years web developers have used tools like Grunt or Gulp to orchestrate a client-side build process to squish their assets. The key is to find a balance that gives you easy access to development versions of JS/CSS assets when at dev time, while making it "zero work" to put minified stuff into production. Additionally, some devs don't need the Grunt/Gulp/npm overhead while others absolutely do. So how do you find balance? Here's how it works.

I'm in Visual Studio 2017 and I go File | New Project | ASP.NET Core Web App. Bundling isn't on by default but the configuration you need IS included by default. It's just minutes to enable and it's quite nice.

In my Solution Explorer is a "bundleconfig.json" like this:

// Configure bundling and minification for the project.

// More info at https://go.microsoft.com/fwlink/?LinkId=808241

[

  {

    "outputFileName": "wwwroot/css/site.min.css",

    // An array of relative input file paths. Globbing patterns supported

    "inputFiles": [

      "wwwroot/css/site.css"

    ]

  },

  {

    "outputFileName": "wwwroot/js/site.min.js",

    "inputFiles": [

      "wwwroot/js/site.js"

    ],

    // Optionally specify minification options

    "minify": {

      "enabled": true,

      "renameLocals": true

    },

    // Optionally generate .map file

    "sourceMap": false

  }

]

Pretty simple. Ins and outs. At the top of the VS editor you'll see this yellow prompt. VS knows you're in a bundleconfig.json and in order to use it effectively in VS you grab a small extension. To be clear, it's NOT required. It just makes it easier. The source is at https://github.com/madskristensen/BundlerMinifier. Slip this UI section if you just want Build-time bundling.

If getting a prompt like this bugs you, you can turn all prompting off here:

Look at your Solution Explorer. See under site.css and site.js? There are associated minified versions of those files. They aren't really "under" them. They are next to them on the disk, but this hierarchy is a nice way to see that they are associated, and that one generates the other.

Right click on your project and you'll see this Bundler & Minifier menu:

You can manually update your Bundles with this item as well as see settings and have bundling show up in the Task Runner Explorer.

Build Time Minification

The VSIX (VS extension) gives you the small menu and some UI hooks, but if you want to have your bundles updated at build time (useful if you don't use VS!) then you'll want to add a NuGet package called BuildBundlerMinifier.

You can add this NuGet package SEVERAL ways. Which is awesome.

• Add it from the Manage NuGet Packages menu
• Add it from the command line via "dotnet add package BuildBundlerMinifier"
• Note that this adds it to your csproj without you having to edit it! It's like "nuget install" but adds references to projects!  The dotnet CLI is lovely.
• If you have the VSIX installed, just right-click the bundleconfig.json and click "Enable bundle on build..." and you'll get the NuGet package.
  

Now bundling will run on build...

c:\WebApplication8\WebApplication8>dotnet build

Microsoft (R) Build Engine version 15

Copyright (C) Microsoft Corporation. All rights reserved.



  Bundler: Begin processing bundleconfig.json

  Bundler: Done processing bundleconfig.json

  WebApplication8 -> c:\WebApplication8\bin\Debug\netcoreapp1.1\WebApplication8.dll



Build succeeded.

    0 Warning(s)

    0 Error(s)

...even from the command line with "dotnet build." It's all integrated.

This is nice for VS Code or users of other editors. Here's how it would work entirely from the command prompt:

$ dotnet new mvc

$ dotnet add package BuildBundlerMinifier

$ dotnet restore

$ dotnet run

Advanced: Using Gulp to handle Bundling/Minifying

If you outgrow this bundler or just like Gulp, you can right click and Convert to Gulp!

Now you'll get a gulpfile.js that uses the bundleconfig.json and you've got full control:

And during the conversion you'll get the npm packages you need to do the work automatically:

I've found this to be a good balance that can get quickly productive with a project that gets bundling without npm/node, but I can easily grow to a larger, more npm/bower/gulp-driven front-end developer-friendly app.

Sponsor: Did you know VSTS can integrate closely with Octopus Deploy? Join Damian Brady and Brian A. Randell as they show you how to automate deployments from VSTS to Octopus Deploy, and demo the new VSTS Octopus Deploy dashboard widget. Register now!