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を導入します。

scniro/gulp-clean-css

hparra/gulp-rename

パッケージの導入

gulp-clean-cssとrenameパッケージの導入を行います。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を事前に行っておく必要があるということが分かりました。