如何编写自定义Gulp任务批量移除HTML文件中的指定属性

一、现成插件推荐 #

直接用 gulp-cheerio 是最简单的方案，cheerio 是 Node 环境下类 jQuery 的 HTML 解析库，你原本的浏览器端逻辑几乎可以完全复用，不用做大量调整。
安装依赖命令：

npm install gulp-cheerio cheerio --save-dev

Gulp 任务配置代码：

const gulp = require("gulp");
const cheerio = require('gulp-cheerio');

gulp.task("clean", async () => {
  return gulp.src("src/*.html")
    .pipe(cheerio(function ($) {
      // 原有浏览器逻辑仅需替换document为$即可复用
      const discardAttributes = (element, ...attributes) =>
        attributes.forEach((attribute) => $(element).removeAttr(attribute));
      
      $("table, thead, tbody, tr, th, td").each((_, elem) => {
        discardAttributes(elem, "cellspacing", "cellpadding", "width", "style");
      });
    }))
    .pipe(gulp.dest("dist"));
});

如果需要更轻量化的针对性插件，也可以选择 gulp-remove-attributes，直接配置选择器和待移除属性列表即可完成需求。

二、手动实现自定义插件 #

手动实现需要用到 through2，Gulp 的流式处理基于 Node 的 Transform 流，through2 是对 Transform 流的轻量封装，能大幅简化自定义插件的编写逻辑。
需要额外安装的依赖：

npm install through2 cheerio --save-dev

自定义 discardAttributes 插件的完整代码：

const gulp = require("gulp");
const through = require('through2');
const cheerio = require('cheerio');

// 自定义插件实现
function discardAttributes() {
  return through.obj(function (file, encoding, callback) {
    // 跳过空文件
    if (file.isNull()) {
      return callback(null, file);
    }
    // 暂不支持流格式文件，仅处理Buffer类型
    if (file.isStream()) {
      return callback(new Error('不支持流格式的文件处理'));
    }
    // 解析HTML内容
    const $ = cheerio.load(file.contents.toString());
    // 执行属性移除逻辑，和原有浏览器逻辑一致
    $("table, thead, tbody, tr, th, td").each((_, elem) => {
      ["cellspacing", "cellpadding", "width", "style"].forEach(attr => {
        $(elem).removeAttr(attr);
      });
    });
    // 将处理后的内容写回文件
    file.contents = Buffer.from($.html());
    callback(null, file);
  });
}

// 调用自定义插件的任务
gulp.task("clean", async () => {
  return gulp.src("src/*.html")
    .pipe(discardAttributes())
    .pipe(gulp.dest("dist"));
});

如果不想引入cheerio，也可以替换为原生HTML解析库如htmlparser2，但需要自行处理DOM节点遍历逻辑，开发成本会高很多，更推荐使用cheerio的方案。

内容的提问来源于stack exchange，提问作者desert_dweller