スタティクサイト ジェネレーター " 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