Use from Gulp

The bundleconfig.json file can be consumed directly from Gulp or any other task runner that can read JSON. By doing that, there is no longer a requirement to use the BundlerMinfier.Core NuGet package from ASP.NET Core to make it work

Let's look at how to use the following bundleconfig.json file.

[
  {
    "outputFileName": "wwwroot/css/site.min.css",
    "inputFiles": [ "wwwroot/css/site.css" ]
  },
  {
    "outputFileName": "wwwroot/js/site.min.js",
    "inputFiles": [ "wwwroot/js/site.js" ]
  }
]

Globbing patterns are supported for the inputFiles array just like it would be in gulp.src().

The Gulpfile.js that performs the bundling and minification have to require the bundleconfig.json file and then use it in the various tasks. It could look like this:

"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");

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

gulp.task("min:js", function () {
    var tasks = getBundles(".js").map(function (bundle) {
        return gulp.src(bundle.inputFiles, { base: "." })
            .pipe(concat(bundle.outputFileName))
            .pipe(uglify())
            .pipe(gulp.dest("."));
    });
    return merge(tasks);
});

gulp.task("min:css", function () {
    var tasks = getBundles(".css").map(function (bundle) {
        return gulp.src(bundle.inputFiles, { base: "." })
            .pipe(concat(bundle.outputFileName))
            .pipe(cssmin())
            .pipe(gulp.dest("."));
    });
    return merge(tasks);
});

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

gulp.task("clean", function () {
    var files = bundleconfig.map(function (bundle) {
        return bundle.outputFileName;
    });

    return del(files);
});

gulp.task("watch", function () {
    getBundles(".js").forEach(function (bundle) {
        gulp.watch(bundle.inputFiles, ["min:js"]);
    });

    getBundles(".css").forEach(function (bundle) {
        gulp.watch(bundle.inputFiles, ["min:css"]);
    });

    getBundles(".html").forEach(function (bundle) {
        gulp.watch(bundle.inputFiles, ["min:html"]);
    });
});

function getBundles(extension) {
    return bundleconfig.filter(function (bundle) {
        return new RegExp(`${extension}$`).test(bundle.outputFileName);
    });
}

The package.json file used in this example looks like this:

{
  "devDependencies": {
    "del": "2.2.1",
    "gulp": "3.9.1",
    "gulp-concat": "2.6.0",
    "gulp-cssmin": "0.1.7",
    "gulp-htmlmin": "0.1.7",
    "gulp-uglify": "1.5.4",
    "merge-stream": "1.0.0"
  }
}