index.htmlをminifyしてみる。【ver.4.2】

index.htmlはそんなに容量が大きいわけではないので効果は薄いと思われるが、bundle.jsをminifyしたついでなのでこちらもminifyしてみる。

gulp-htmlminのインストー

> npm install gulp-htmlmin --save-dev

gulpfileにminifyの処理を追加する

minifyHTMLに設定できるオプションはkangax/html-minifierにリストアップされている。

gulpfile.babel.js

import gulp from "gulp";
import webserver from "gulp-webserver";
import minifyHTML from "gulp-htmlmin";

gulp.task("server", () => {
  startServer();
});

gulp.task("build:assets", () => {
  buildAssets();
});

gulp.task("build:css", () => {
  buildCSS();
});

gulp.task("build:html", () => {
  buildHTML();
});

function buildAssets() {
  gulp.src(["source/**/*.jpg", "source/**/*.txt", "source/**/*.xml", "source/**/*.ico"])
      .pipe(gulp.dest("build"));
}

function buildCSS() {
  gulp.src(["source/**/*.css"])
      .pipe(gulp.dest("build"));
}

function buildHTML() {
  gulp.src(["source/**/*.html"])
      .pipe(minifyHTML({
        "collapseWhitespace": true
      }))
      .pipe(gulp.dest("build"));
}

function startServer() {
  gulp.src(["build"])
      .pipe(webserver());
}

minifyの前後比較

BEFORE (1.41KB)

f:id:KazmaArakaki:20170619195533j:plain

AFTER (1.30KB)

f:id:KazmaArakaki:20170619195649j:plain

ほぼ変化なし。