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?

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