HugoのNode.jsとgulpを使ったAMP検証

当サイトではアフィリエイト広告を利用しています

Hugoで生成したhtmlファイルがAMP対応しているかの検証を、Node.js+gulpを用いて行います。



なお、前回でNode.jsは導入済みであるものとします。

AMP検証環境の構築

検証の自動化ツールとしてgulpを今回は用います。 まずはhugoで管理するサイト用のルートディレクトリに移動し、必要なパッケージをインストールします。 なお、gulpはグローバルインストールしています。

> npm init
> npm install -g gulp
> npm install --save gulp
> npm install --save amphtml-validator
> npm install --save gulp-amphtml-validator

AMPファイルのディレクトリ確認

私のhugo環境では、xxx/yyy.htmlという名前のページはamp/xxx/yyy.htmlとしてAMP対応ページを作成しています。

これを前提としてgulpの設定を行います。

gulp設定ファイルの記述

設定ファイルをgulpfile.jsとして次のように記載します。

const gulp = require('gulp');
const gulpAmpValidator = require('gulp-amphtml-validator');

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

gulp.task('amp', () => {
  return gulp.src(paths)
    .pipe(gulpAmpValidator.validate())
    .pipe(gulpAmpValidator.format())
    .pipe(gulpAmpValidator.failAfterError());
});
gulp.task('default', ['amp'], function () {
});

この設定後、hugoコマンドでpublic以下に生成されたhtmlファイルに対して、gulpもしくはgulp ampの実行で一括でAMP対応の検証が行えます。

これでローカル環境でもAMPの検証が一括で行えるようになりました。

参考

AMPプロジェクトのドキュメント、gulp-amphtml-validatorのドキュメントを参考に設定ファイルを記述しました。

まとめ

今回の記事では、Node.js, gulp, amphtml-validatorを用いて、Hugoの生成htmlがAMP対応しているか検証するローカル環境の構築を行いました。