GULPでHTMLをミニファイ化（最適化）する方法(gulp-htmlmin)

2021年7月31日GULP

GULPでHTMLをミニファイ化（最適化）する方法を紹介します。

GULPでHTMLをミニファイ化（最適化）する手順

• gulp-htmlminをインストール
• gulpfile.jsに記述

gulp-htmlminをインストール

npm i gulp-htmlmin --save-dev

上のコマンドでインストールできます。

gulpfile.jsに記述

const gulp = require('gulp');
const kit = require('gulp-kit');
const htmlmin = require('gulp-htmlmin');

// HTML kit templating
gulp.task('kit', function () {
  return gulp.src('./html/**/*.kit')
  .pipe(kit()) //kitファイルをまとめる
  .pipe(htmlmin({ //htmlをミニファイ化
    collapseWhitespace: true //スペースを削除
  }))
  .pipe(gulp.dest('./'));
});

kitを使っているなら、kitの後にhtmlをミニファイ化します。
上では、余白の削除をtrueにしています。
他にもいろいろなことを指定できるので、npmの公式ページよりdocを確認するといいです。