適当な思いつきで書くブログ

テキオモの記憶の片隅に追いやられそうな出来事を書き連ねます

Gulpでhtmlに使ってはいけないクラス名が含まれていないかチェックする

2017年10月28日

下記の例はjQueryUIが付加するようなクラス名(ui-*から始まるような)が含まれていたらエラーにする。

var gulp = require('gulp');
var cheerio = require('gulp-cheerio');
var through2 = require('through2')
var gulpUtil = require('gulp-util')

gulp.task('html-validator', function() {
  gulp.src([
    '/PATH/TO/**/*.html',
  ])
  .pipe(cheerio({
    run: function($, file) {
      var elements = $('[class^="ui-"], [class*=" ui-"]')
      if (elements.length === 0) {
        return;
      }

      var matches = elements.attr('class').match(/\b(ui-[^ ]+)/g)
      var invalidClass = {};
      for (var i  in matches) {
        invalidClass['"' + matches[i] + '"'] = true;
      }

      gulpUtil.log(gulpUtil.colors.red('Can not use class name ' + Object.keys(invalidClass).join(', ') + ' in ' + file.path));
      process.exit(1);
    }
  }))
  .pipe(through2.obj(function(file, enc, cb) {cb()}))
});

参考

Node.js - gulp-tapの動作について(89729)|teratail