Hugoで作成するhtmlとCSSを、Node.jsとgulpを使ってMinifyを行い、容量の圧縮を行います。

なお、Node.jsとgulpは既に導入済みであるとします。それらの導入は次の記事を参考にしてください。

Hugo環境

Hugoで作成するブログ環境は次のようになっているものとします。(関連してないディレクトリは除外してます)

  • content: 記事を記述
  • layouts
    • _default: baseof.htmlでcssをインライン展開
    • partials: style.cssでスタイル記述
  • public: 生成したhtmlの保存ディレクトリ
  • dist: minifyしたhtmlの保存ディレクトリ
  • gruntfile.js

私の環境ではAMP対応のため、CSSファイルをlayouts/partials以下に配置してインライン展開させています。環境によってはstatic以下に置かれている場合もあるでしょうが、それらは適宜置き替えて下さい。

gulp-htmlmin単体の利用(失敗)

結論から書くとうまくいきませんでした。 急ぎの方は次の項まで読み飛ばしてください。

gulp-htmlminを用いて、htmlとインラインcssのminifyを行ってみます。 なお、パッケージのオプションはgulp-htmlminのベースとなっているhtml-minifierのものを参考にしました。

パッケージの導入

次のようにパッケージのインストールを行いました。

$ npm install --save gulp-htmlmin

gulpfile.jsの設定

gulpの設定ファイルgulpfile.jsは次のように記述しました。

内容としては、スペース除去、大文字小文字の区別をつける、改行は保存する(見易さ維持のため)、CSSとJavascriptのMinifyを行う、といったものになっています。

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

var paths = "public/**/*.html";

gulp.task('minify-html', () => {
  return gulp.src(paths)
    .pipe(htmlmin({
      collapseWhitespace: true,
      caseSensitive: true,
      preserveLineBreaks: true,
      minifyCSS: true,
      minifyJS: true}))
    .pipe(gulp.dest('dist'));
});

gulp.task('default', ['minify-html'], function () {
});

結果(失敗)

上記の設定ファイルで実行を行ってみました。

$ gulp minify-html

しかし、結果としてはCSSのminifyが期待通りに行われず、ページのレイアウトが大幅に崩れる事態となってしまいました。試しにminifyCSSの行を削除すればレイアウトは正常だったので、CSSのMinifyが正常に行えていないようです。

原因としてはおそらく、AMP対応のためインラインCSSをstyleタグ内に記述していたためだと考えられます。

gulp-htmlminとgulp-clean-cssの併用(成功)

上記の失敗を経て対応を考えました。

gulp-htmlmin単体でHugoの生成htmlからまとめてhtml, CSS, javascriptのMinifyを行うのではなく、CSSをインライン展開する前にMinifyを行っておくというものです。

CSSのMinifyのために、gulp-clean-cssを導入します。

パッケージの導入

gulp-clean-cssrenameパッケージの導入を行います。renameは元となったcssとMinifyしたcssを同じディレクトリで管理するために導入しています。

$ npm install --save gulp-htmlmin
$ npm install --save gulp-clean-css
$ npm install --save gulp-rename

gulpfile.jsの記述

gulpの設定の記述は次のように行いました。 同時に、baseof.html内部でインライン展開するcssファイルをstyle.cssからstyle.min.cssに変更します。

const gulp = require('gulp');
const htmlmin = require('gulp-htmlmin');
const cleanCSS = require('gulp-clean-css');
const rename = require('gulp-rename');

var paths = "public/**/*.html";
var css_path = "layouts/partials/*.css";
var css_min_path = "layouts/partials";

gulp.task('minify-css', () => {
  return gulp.src(css_path)
    .pipe(cleanCSS({}))
    .pipe(rename({extname: '.min.css'}))
    .pipe(gulp.dest(css_min_path))
});

gulp.task('minify-html', () => {
  return gulp.src(paths)
    .pipe(htmlmin({
      collapseWhitespace: true,
      caseSensitive: true,
      preserveLineBreaks: true,
      minifyJS: true}))
    .pipe(gulp.dest('dist'));
});

gulp.task('default', ['minify-html'], function () {
});

実行

CSSのMinifyは次のように行います。

$ gulp minify-css

また、htmlとJavacriptのMinifyは次のように行います。

$ gulp minify-html

結果

CSSの記述後、gulp minify-cssを実行してstyle.cssのMinify結果をstyle.min.cssとして保存します。

そして、hugoコマンドでpublic以下にhtmlを生成し、gulp minify-htmlでhtmlのMinifyを行います。

結果として、レイアウトは正常のままhtml, CSS, JavascriptのMinifyを行うことができました。

まとめ

Hugoで生成したhtml, CSS, JavascriptのMinifyを行うために、gulp-htmlmin, gulp-clean-css, gulp-renameの3つのパッケージを使用しました。

結果として、AMP対応でインラインCSSで記述する際にはCSSのMinifyを事前に行っておく必要があるということが分かりました。