Gulp Tutorial - Part 8 Optimizing HTML

http://robertdunaway.github.io

http://mashupjs.github.io

The Mashup is a learning tool that serves as a seed project for line-of-business applications. It’s goal is a shortened learning curve for building modern business applications and the reduction of technical debt.

This tutorial and more can be found in

Gulp - Quick guide to getting up and running today

Gulp Tutorial - Part 8

Optimizing HTML

HTML presents another opportunity for optimization. With every “bit” we can squeeze out of the code, the healthier is the application. HTML optimization is more noticeable as the HTML file becomes larger.

From the command-line install

npm install gulp-minify-html --save-dev

Add the module to the Gulp file

, minifyhtml = require('gulp-minify-html')

Add the task to the Gulp file

gulp.task('minifyhtml', function () {
    return gulp.src(['dist/**/*.html', '!/**/*.min.html', '!dist/core/lib/**/*'], { base: 'dist/./' })
      .pipe(plumber({
          errorHandler: onError
      }))
     .pipe(sourcemaps.init())
     .pipe(minifyhtml())
     .pipe(rename({
         extname: '.min.html'
     }))
     .pipe(sourcemaps.write('./'))
     .pipe(gulp.dest('dist/./'));
});

Small templates won’t realize much improvement with HTML minification, but every little bit helps. Larger HTML files will benefit, but while we’re at it, let’s just minify all HTML files.

Add new task to the default task

gulp.task('default', function () {
    runSequence('annotate', 'clean-dist', 'copy',
                ['coreservices', 'routeconfig', 'libs', 'minifyhtml'],
                ['uglifyalljs', 'minifycss']);
});

Run the default task

gulp

For more information on gulp-minify-html.

https://www.npmjs.com/package/gulp-minify-html

Source code for this tutorial

Start the tutorial using this code base:

https://github.com/MashupJS/gulp-tutorial

A completed tutorial can be found here:

https://github.com/MashupJS/gulp-tutorial-end-result

This tutorial and more can be found in

Gulp - Quick guide to getting up and running today