Bundling and minification of ES6 javascript files in an asp.net MVC web application

Question

We know that System.Web.optimization does not support ES6 javascript files bundling and minification, So how to support that?

Ledge

Answer 1

1. Install BuildBundlerMinifier2022 NuGet package to your project.
2. Add a package.json file, with the following devDependencies, to the root of your project:

{
  "name": "YourProjectName",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "devDependencies": {
    "del": "^3.0.0",
    "gulp": "^4.0.0",
    "gulp-concat": "^2.6.1",
    "gulp-cssmin": "^0.2.0",
    "gulp-htmlmin": "^3.0.0",
    "gulp-terser": "^1.4.0",
    "gulp-uglify": "^3.0.0",
    "merge-stream": "^1.0.1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

3. Run the following npm commands inside your project root:

npm i

npm i -g gulp-cli

4. Add the following gulpfile.js file below to the project root:

'use strict';

var gulp = require('gulp'),
    concat = require('gulp-concat'),
    cssmin = require('gulp-cssmin'),
    htmlmin = require('gulp-htmlmin'),
    uglify = require('gulp-uglify'),
    merge = require('merge-stream'),
    del = require('del'),
    bundleconfig = require('./bundleconfig.json');
const terser = require('gulp-terser');

const regex = {
    css: /\.css$/,
    html: /\.(html|htm)$/,
    js: /\.js$/
};

gulp.task('min:js', async function () {
    merge(getBundles(regex.js).map(bundle => {
        return gulp.src(bundle.inputFiles, { base: '.' })
            .pipe(concat(bundle.outputFileName))
            //.pipe(uglify())
            .pipe(terser())
            .pipe(gulp.dest('.'));
    }))
});

gulp.task('min:css', async function () {
    merge(getBundles(regex.css).map(bundle => {
        return gulp.src(bundle.inputFiles, { base: '.' })
            .pipe(concat(bundle.outputFileName))
            .pipe(cssmin())
            .pipe(gulp.dest('.'));
    }))
});

gulp.task('min:html', async function () {
    merge(getBundles(regex.html).map(bundle => {
        return gulp.src(bundle.inputFiles, { base: '.' })
            .pipe(concat(bundle.outputFileName))
            .pipe(htmlmin({ collapseWhitespace: true, minifyCSS: true, minifyJS: true }))
            .pipe(gulp.dest('.'));
    }))
});

gulp.task('min', gulp.series(['min:js', 'min:css', 'min:html']));

gulp.task('clean', () => {
    return del(bundleconfig.map(bundle => bundle.outputFileName));
});

gulp.task('watch', () => {
    getBundles(regex.js).forEach(
        bundle => gulp.watch(bundle.inputFiles, gulp.series(["min:js"])));

    getBundles(regex.css).forEach(
        bundle => gulp.watch(bundle.inputFiles, gulp.series(["min:css"])));

    getBundles(regex.html).forEach(
        bundle => gulp.watch(bundle.inputFiles, gulp.series(['min:html'])));
});

const getBundles = (regexPattern) => {
    return bundleconfig.filter(bundle => {
        return regexPattern.test(bundle.outputFileName);
    });
};

gulp.task('default', gulp.series("min"));

5. Inside your .csproj file of your project add the following build task:

<Target Name="MyPreCompileTarget" BeforeTargets="Build">   
  <Exec Command="gulp min" />
 </Target>

6. Add the following bundleconfig.json file below to the project root(here you can add js, css files need to be minified):

[
  {
    "outputFileName": "Content/css/site.min.css",
    "inputFiles": [
      "Content/css/site.css"
    ]
  },
  {
    "outputFileName": "Content/js/site.min.js",
    "inputFiles": [
      "Content/js/site.js"
    ],
    "minify": {
      "enabled": true,
      "renameLocals": true
    },
    "sourceMap": false
  }
]

7. Inside your BundleConfig.cs you can do the following:

   public class BundleConfig
   {
       public static void RegisterBundles(BundleCollection bundles)
     {
   
   
        bundles.Add(new Bundle("~/Content/css/site").Include(
                 "~/Content/css/site.css"));
   
   
        bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Content/lib/jquery/jquery-{version}.js"));
   
        //use Bundle instead of ScriptBundle
        bundles.Add(new Bundle("~/Content/js/site").Include(
                    "~/Content/js/site.js"));
   
        //disable it for development environment
        if (Environment.Development)
        {
            BundleTable.EnableOptimizations = false;
        }
        else
        {
            BundleTable.EnableOptimizations = true;
        }
    }
   }
   

8. Finally inside your view:

   @Styles.Render("~/Content/css/site")
   @Scripts.Render("~/Content/js/site")
   

My answer based on the following MSDN resources:

Bundling and Minification

Bundle and minify static assets in ASP.NET Core

Ledge

Not sure what I'm doing wrong, the framework indeed picks up the generated *.min.js files automatically, but still tries to minify them again and I see the following message in the served file (in dev tools): "Minification failed. Returning unminified contents." – Visitation

Update: to avoid the issue, use Bundle instead of ScriptBundle for the files that have a .min.js pair – Visitation

Also, it seems that the BuildBundlerMinifier tries to minify before gulp and chokes on some ES6 features (like # aka private). I had to uninstall it from NuGet packages of the project. – Visitation