Minify html in ASP.NET Core

This post describes a way to minify html in ASP.NET Core that I have used in a project. The main reason to minify html is to get a faster website och possible better search rankings (SEO).

It is tricky to minify html and you need to carefully look at the minified html to make sure that you not have removed more than wanted.

You can minify html on the fly before the html is sent to the user or you can minify the code in views before they are uploaded to a server. The described method in this post is to minify views before they are uploaded to a server.

Npm, Node.js and package installer

We are going to use Gulp.js to minify html. Gulp is a JavaScript task runner built on Node.js, developed by Fractal Innovations. Gulp.js is a npm package and we need Package Installer that is created by Mads Kristensen to install npm packages to our project. You will also need to have Node.js installed on your system. We need 3 npm packages, see the contents of the project.json file below.

{
  "name": "mysite",
  "version": "1.0.0",
  "devDependencies": {
    "gulp": "^4.0.0",
    "gulp-transform": "^3.0.5",
    "gulp-util": "^3.0.8"
  }
}

Gulp Task

Unminified views in our project are stored in a folder named Views, we need to rename this folder to ViewTemplates. Our minified views will be stored in a folder named Views. Add gulpfile.js to the root of your project, if i doesn’t exist already. Add the following contents to the gulpfile.js file.

/// <binding BeforeBuild='minify-cshtml' />
var gulp = require('gulp');
var gutil = require('gulp-util');
var transform = require('gulp-transform');

// Create a task
gulp.task('minify-cshtml', run);

// Minify cshtml
function run()
{
    // Log that work is starting
    gutil.log("Processing files!");

    // Set the source document
    return gulp.src('./ViewTemplates/**/*.cshtml')
        .pipe(transform('utf8', minify))
        .pipe(gulp.dest('./Views'));

    // Signal that the task is done
    //done();

} // End of the run method

// Minify content
function minify(content)
{
    // Html comments
    content = content.replace(/(?!<pre[^>]*?>)(<!--[\s\S]*?-->)(?![^<]*?<\/pre>)/g, '');
    //content = content.replace(/<!--[\s\S]*?-->/g, '');
    //content = content.replace(/(?!<pre[^>]*?>)(INSERT SHIT HERE)(?![^<]*?<\/pre>)/g, '');

    // Razor comments
    content = content.replace(/(?!<pre[^>]*?>)(@\*[\s\S]*?\*@)(?![^<]*?<\/pre>)/g, '');
    //content = content.replace(/@\*[\s\S]*?\*@/g, '');

    // Javascript comments
    content = content.replace(/(?!<pre[^>]*?>)((\/\*([\s\S]*?)\*\/)|(\/\/(\s.*)))(?![^<]*?<\/pre>)/g, '');
    //content = content.replace(/(\/\*([\s\S]*?)\*\/)|(\/\/(\s.*))/gm, '');

    // Html
    content = content.replace(/(?!<pre[^>]*?>)([\s]{2,}(?!@))(?![^<]*?<\/pre>)/gi, '');
    //content = content.replace(/>[\s]*\<(?!(\/pre))/gi, '><');
    //content = content.replace(/>[\s]*\</gi, '><');
    //content = content.replace(/[\s]{2,}(?!@)/gi, '');

    // Line breaks
    content = content.replace(/(?!<pre[^>]*?>)([\r\n](?!@))(?![^<]*?<\/pre>)/g, '');
    content = content.replace(/(?!<pre[^>]*?>)([\r](?!@))(?![^<]*?<\/pre>)/g, '');
    content = content.replace(/(?!<pre[^>]*?>)([\n](?!@))(?![^<]*?<\/pre>)/g, '');
    //content = content.replace(/[\r\n](?!@)/g, '');
    //content = content.replace(/[\r](?!@)/g, '');
    //content = content.replace(/[\n](?!@)/g, '');

    //gutil.log(content);

    // Return the content
    return content;

} // End of the minify method

This task will one by one get all the views in the ViewTemplates folder, minify the contents with a series of RegEx statements and save the minified file to the Views folder.

Task Runner Explorer

Task Runner Explorer in Visual Studio will help you find gulp tasks (minify-cshtml). You can use Task Runner Explorer to run a task, debug a task and to add bindings for when a task should run (before build for example).