http://robertdunaway.github.io

Gulp code kata list

All code katas lists

015 Gulp - optimizing html

Duration

5 minutes

Brief

In this kata we will optimize html files.

For more information

BING/GOOGLE: “Gulp optimize html”

Book:
Gulp - Quick guide to getting up and running today

Instructions

Get tutorial folder or the entire katas-Gulp repo.
Open the [before/*.sln] file and execute the kata.
Feel free to execute this kata multiple times because repetition creates motor memory.

Github

• Before (start kata with this)
  
  • https://github.com/robertdunaway/katas-gulp/tree/master/015%20Gulp%20-%20optimizing%20html/before
• After
  
  • https://github.com/robertdunaway/katas-gulp/tree/master/015%20Gulp%20-%20optimizing%20html/after

Kata

After copying all src files to wwwroot, optimize the html.

Review

Install the npm plugins we need. The gulp, gulp-rename, run-sequence, and gulp-sourcemaps have already been installed.

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

References will now look like this

var gulp = require('gulp')
    , runSequence = require('run-sequence')
    , rename = require('gulp-rename')
    , sourcemaps = require('gulp-sourcemaps')
    , minifyhtml = require('gulp-minify-html');

Create the new minifyhtml task and add it to the default task.

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

gulp.task('default', function () {
    runSequence('copy-to-wwwroot', 'minifyhtml');
});

Check out your newly optimized html files.

Before



After

Next

Take a few minutes and imagine more examples.