Hugoでpublicフォルダ内のhtmlファイルを圧縮をする

 スタティクサイト ジェネレーター " Hugo " で ' public ' フォルダ内のhtmlを 圧縮する方法の紹介です。

 Hugoは Go言語で作られている 静的なWebサイトを作成する スタティクサイト ジェネレーターで、ブログや GitHubにホスティングするドキュメントサイトを作成する時に 使われることも多いと思います。

 また、スタティクサイト (静的サイト) を作る時に 「JekyllかHugo、どちらで作ろうか ?」そのように考えた人も少なくないかもしれません。

 Hugoは テンプレートやmarkdownで書いたコンテンツ全て htmlに変換される、克つ Go言語で作られているため ビルドがスコブル早い のが大きな特徴です。

 コンテンツ全てが静的ファイルに変換されるので、その利点を活かして htmlファイルを全て圧縮( minify )してみました。圧縮すれば個々のファイルを小さくするだけではなく、コード内のコメントも削除できます。
( * pre タグ内のコード タグのスタイルは崩れません )
 

- ' gulp ' と gulpのプラグイン ' gulp-htmlmin ' を使って ' public ' フォルダ直下の html ファイルを全て圧縮する

 htmlの圧縮には ' gulp 'と ' gulp-htmlmin ' を利用します。動作には node.js が必要なので 事前に導入しておく必要があります。

 node.js が使える環境なら、ターミナルから プロジェクトルート上で、'  npm 'コマンドを使い 依存パッケージのインストールをします。

# * npm を使ってインストールする場合
npm install gulp-cli -g
npm i gulp gulp-htmlmin -save-dev
# * yarn を使ってインストールする場合
# yarn global add gulp-cli
# yarn add gulp gulp-htmlmin --dev

# * プロジェクトフォルダに 'package.json' がない場合は下記のコマンド
# npm init

 続いて、プロジェクトルート上に ' gulpfile.js ' を作成し、圧縮するタスクを記述します。' gulp-htmlmin ' は内部で ' html-minifier ' が使われているので、圧縮のオプションが そのまま利用できます。

// gulpfile.js
// このコードはnode.js 8.* 以上で動作します
const gulp = require("gulp");
const htmlmin = require("gulp-htmlmin");

const fs = require("fs");
const util = require("util");
const error = console.error;

let readDirectory = util.promisify(fs.readdir);

// コマンド名 'minify' を登録
gulp.task("minify", () => {
  // ターゲットディレクトリ
  const codeDir = "public";
  // html-minifierのオプション
  const minOptions = {
    collapseWhitespace: true,
    caseSensitive: true
  };

  readDirectory(codeDir)
    .then(() => {
      // 'public' ディレクトリが存在している時の処理
      return (
        gulp
          // ディレクトリに含まれる htmlファイルを全て指定
          .src(`${codeDir}/**/*.html`)
          // ここで圧縮、引数はminifyする時のオプション
          .pipe(htmlmin(minOptions))
          // 'public' ディレクトリにオーバーライド
          .pipe(gulp.dest(codeDir))
      );
    })
    // 'public' ディレクトリが存在しない時に返す処理
    .catch(() => error(`Direcitory : '${codeDir}' does't exist .`));
}); // ! minify

 これで準備の完了です。ターミナル上で下記のコマンドを打てば ' public ' フォルダ内の全ての html ファイルが圧縮されます。

# htmlをminify
gulp minify

 以上が Hugoで ' public 'ディレクトリ直下の htmlタグを一度に圧縮する方法でした。静的サイトであれば Hugoに関わらず何にでも応用可能なので 機会があれば是非お試しください。

GitHub : jonschlinkert/gulp-htmlmin