Мне нужно написать пользовательскую задачу Gulp, которая удалит атрибуты из моего HTML

Question 1

Мне нужна задача Gulp, которая будет просматривать все назначенные HTML-документы и удалять определенные атрибуты (например, style=""). Я думал, что, возможно, смог бы сделать это так же, как я делаю это через браузер, но, похоже, нет. Вот что я пытаюсь сделать:

// function to take multiple attributes from an element
const discardAttributes = (element, ...attributes) =>
  attributes.forEach((attribute) => element.removeAttribute(attribute));

// run the function on multiple elements
document.querySelectorAll("table, thead, tbody, tr, th, td").forEach((elem) => {
  discardAttributes(elem, "cellspacing", "cellpadding", "width", "style");
});

Затем я хотел бы воспользоваться приведенной выше формулой и создать gulp.task следующим образом:

const gulp = require("gulp");

gulp.task("clean",  async () => {
 gulp.src("src/*.html")
  .pipe(discardAttributes())
    .pipe(gulp.dest("dist"));
});

Если есть плагин, который я могу использовать для этого, пожалуйста, поделитесь, но также я хотел бы узнать, как это сделать вручную, вот так.

Нужно ли мне использовать through2?

Спасибо.

Question 2

Вы можете использовать некоторую библиотеку node dom и обернуть ее с помощью gulp. Например, вы могли бы попробовать jsdom и оболочку gulp-dom:

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

gulp.task("default", async () => {
 gulp.src("src/*.html")
  .pipe(dom(function() {

      // function to take multiple attributes from an element
      const discardAttributes = (element, ...attributes) =>
        attributes.forEach((attribute) => element.removeAttribute(attribute));

      // run the function on multiple elements
      return this.querySelectorAll("table, thead, tbody, tr, th, td").forEach((elem) => {
       discardAttributes(elem, "cellspacing", "cellpadding", "width", "style");
    });

  }))
  .pipe(gulp.dest("dist"));
});

Nikolay · Answer 1 · 2021-11-21T17:18:21

Вы можете использовать некоторую библиотеку node dom и обернуть ее с помощью gulp. Например, вы могли бы попробовать jsdom и оболочку gulp-dom:

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

gulp.task("default", async () => {
 gulp.src("src/*.html")
  .pipe(dom(function() {

      // function to take multiple attributes from an element
      const discardAttributes = (element, ...attributes) =>
        attributes.forEach((attribute) => element.removeAttribute(attribute));

      // run the function on multiple elements
      return this.querySelectorAll("table, thead, tbody, tr, th, td").forEach((elem) => {
       discardAttributes(elem, "cellspacing", "cellpadding", "width", "style");
    });

  }))
  .pipe(gulp.dest("dist"));
});

Это выглядит многообещающе, я собираюсь это попробовать. Вопросы: Я нигде не вижу jsdom в коде, как он здесь вступает в игру? Извините за мой глупый вопрос, но я новичок в узле. ОБНОВЛЕНИЕ: Согласно документам npm, "плагин[Gulp-dom] обертывает jsdom. Однако этот плагин не включает все функции, предоставляемые jsdom. Единственная цель jsdom в этом плагине-проанализировать HTML-документ в DOM, чтобы мы могли выполнять над ним операции".
Это работает! Огромное спасибо. Вот что я сделал. (1) Я установил jsdom как зависимость от разработчиков (2) Я установил gulp-dom как зависимость от разработчиков (3) Я вставил приведенный выше код и запустил gulp. Извините, я пока не могу проголосовать.
Плагин gulp-dom включает в себя jsdom, нет необходимости устанавливать его отдельно. Если вы довольны ответом, вы можете принять его.

Мне нужно написать пользовательскую задачу Gulp, которая удалит атрибуты из моего HTML

Вопрос

Лучший ответ

На других языках

Эта страница на других языках

Популярное в этой категории

Популярные вопросы в этой категории