gulpでejsをbeautifyしながらコンパイルして、W3Cチェックをかける

大規模開発では素のHTMLを書くことが段々と減ってきました。
HTMLではなくEJSでコーディングするためです。

エディタはVS codeを使っているのですが、EJSを使っていて困ることが、HTMLエラーが正しく検知されないことです。
いろんなプラグインを試しましたが満足行くものはありませんでした。

しかし、この課題はgulpで解決！
今回はEJSをbeautifyしながらHTMLにコンパイルして、コンパイル後のHTMLにW3Cエラーがないかチェックさせる方法をご紹介いたします。

バージョン情報

nodeバージョン 16.13.2

gulpバージョン 4.0.2

ディレクトリ構成

.
├gulpfile.js
├ src //開発用フォルダ
│ └ ejs 
│ 　 ├ index.ejs //コンパイル前のejs
│
└ dest //出力フォルダ
　 └ index.html //コンパイル後のHTML(バリデーションチェックをかける)

ライブラリのインストール

npm install gulp-rename gulp-ejs gulp-html-beautify gulp-w3c-html-validator@2.0.1 --save-dev

今回のメインライブラリ（gulpに必要な基本ライブラリは色略してます）

  • gulp-ejs
  • gulp-html-beautify
  • gulp-w3c-html-validator （version 2.0.1をインストールします。）
    このバージョンより上を選択すると、モジュールの定義でrequireの代わりにimportを使用することになります。

gulpfileにタスクを記述する

const OUTPUT_PATH = "./dest/";
const INPUT_PATH = "./src/";
const gulp = require("gulp");

const ejs = require("gulp-ejs");
const htmlBeautify = require("gulp-html-beautify");
const htmlValidator = require('gulp-w3c-html-validator');

// ejsコンパイル
const ejsCompile = function () {
  return gulp
    .src([INPUT_PATH + "ejs/*.ejs"])
    .pipe(ejs())
    .pipe(rename({ extname: ".html" }))
    .pipe(
      htmlBeautify({
        "indent_size": 2,
        "indent_char": " ",
        "max_preserve_newlines": 0,
        "preserve_newlines": false,
        "extra_liners": [],
      })
    )
    .pipe(gulp.dest(OUTPUT_PATH));
};

//html バリデーションチェック
const validateHtml = function () {
  return gulp.src(OUTPUT_PATH + '/*.html')
    .pipe(htmlValidator({
      url: 'https://validator.w3.org/nu/'
    }))
    .pipe(htmlValidator.reporter());
};

//watchタスク
const watchTask = function (done) {
  gulp.watch(INPUT_PATH + "ejs/*.ejs", ejsCompile);
  gulp.watch(OUTPUT_PATH + '*.html', validateHtml);
}
exports.default = parallel(watchTask);