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

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

GulpでCSSファイルのセレクタのHTMLタグ名をclass名に置き換える

2017年10月05日

独自タグfooをclass.fooに置き換えたかったので、through2を使って書いてみた

var gulp     = require('gulp');
var css      = require('css')
var through2 = require('through2')

gulp.task('imagemin', function(){
  return gulp.src(['/PATH/TO/CSSFILE'])
    .pipe(through2.obj(function (file, enc, callback) {
      var re = new RegExp('(^|\\s+)([a-z]+(?=(?:\\s+|:|\\.|\\s*(?:$|,))))', 'g')
      var parsed = css.parse(file.contents.toString('utf8'))
      for (var i in parsed.stylesheet.rules) {
        for (var j in parsed.stylesheet.rules[i].selectors) {
          parsed.stylesheet.rules[i].selectors[j] = parsed.stylesheet.rules[i].selectors[j].replace(re, '$1.$2')
        }
      }
      // 圧縮するなら
      // file.contents = new Buffer(css.stringify(parsed, {compress: true}))
      this.push(file)
      callback()
    }))
    .pipe(gulp.dest('/PATH/TO/DEST'))
});