[フロントエンド] GulpでHTMLを圧縮する

こんにちは、@yoheiMuneです。
GulpでHTMLファイルを圧縮（minify）する方法を、ブログに書きたいと思います。

目次

Gulpとは

Gulpとはフロントエンドのビルドツールの1つです。今回紹介するhtmlの圧縮以外にも、JSの圧縮や結合など色々なことができます。gulpについては「[JavaScript] Gruntの後発のフロントエンドビルドツール、gulpに入門」をご参照ください。

GulpでHTMLのミニファイする

いくつかnpmモジュールがありますが、gulp-htmlminが人気もあって良さそうです。

npm経由でインストールします。

$ npm install --save gulp-htmlmin

以下のようにgulpで実装します。

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

gulp.task('minify-html', () => {
  return gulp.src('src/*.html')
    .pipe(htmlmin({
        // 余白を除去する
        collapseWhitespace : true,
        // HTMLコメントを除去する
        removeComments : true
    }))
    .pipe(gulp.dest('dist'))
})

htmlminメソッドで指定可能なオプションは、Options Quick Reference から確認できます。

最後に

フロントエンドのビルドツールではWebpackをメインで使いますが、Gulpもまだまだ使う機会が多いです。制約が少なくJSで好きに書けるところが素敵だなと思います。

最後になりますが本ブログでは、フロントエンド、PHP、Node.js、Swift、Python、Linux、Java、インフラ、Go言語、機械学習、などの技術トピックを発信をしていきます。「プログラミングで困ったその時の、解決の糸口に！」そんな目標でブログを書き続けています。ぜひ、本ブログのRSSやTwitterをフォローして貰えたら嬉しいです ^ ^

最後までご覧頂きましてありがとうございました！