Aurelia CLI html minification

Aurelia CLI html minification

In the new release of aurelia-cli (0.24.0) in 1/12/2017, AureliaJS Team added html minification New Aurelia Features and Release Notes - 1/12/2017.

If your running a previous version of aurelia-cli and you want to have html minification you will need to make a couple of changes.

Update package.json

We need to add "gulp-htmlmin": "^3.0.0" to our devDependencies in the package.json

Update tasks

The file that needs to change is aurelia_project/tasks/process-markup.js. It used to look something like this:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

import gulp from 'gulp';
import changedInPlace from 'gulp-changed-in-place';
import project from '../aurelia.json';
import {build} from 'aurelia-cli';

export default function processMarkup() {
  return gulp.src(project.markupProcessor.source)
    .pipe(changedInPlace({firstPass: true}))
    .pipe(build.bundle());
}

and now we need to change it to:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

import gulp from 'gulp';
import htmlmin from 'gulp-htmlmin';
import changedInPlace from 'gulp-changed-in-place';
import project from '../aurelia.json';
import {build} from 'aurelia-cli';

export default function processMarkup() {
  return gulp.src(project.markupProcessor.source)
    .pipe(changedInPlace({ firstPass: true }))
    .pipe(htmlmin({
      removeComments: true,
      collapseWhitespace: true,
      collapseInlineTagWhitespace: true,
      collapseBooleanAttributes: true,
      removeAttributeQuotes: true,
      minifyCSS: true,
      minifyJS: true,
      removeScriptTypeAttributes: true,
      removeStyleLinkTypeAttributes: true
    }))
  .pipe(build.bundle());
}

You can tweak the flags any way you see fit.

The last thing we need is to tell aurelia.json that we want to use this minification, and which level.

So lets open aurelia.json and go this part:

1
2
3
4
5
6

"markupProcessor": {
    "id": "none",
    "displayName": "None",
    "fileExtension": ".html",
    "source": "src/*/.html"
},

We need to change it to:

1
2
3
4
5
6

"markupProcessor": {
    "id": "maximum",
    "displayName": "Maximum Minification",
    "fileExtension": ".html",
    "source": "src/**/*.html"
},

On the terminal, if you run something like in your project au build --env stage you should have html minified.