Muszę napisać własne zadanie Gulp, która usunie atrybuty z mojego HTML

Question 1

Potrzebuję zadanie Gulp, która będzie przeglądać wszystkie przypisane dokumenty HTML i usuwać określone atrybuty (na przykład, style=""). Myślałem, że może mógłbym zrobić to tak, jak robię to przez przeglądarkę, ale chyba nie. To, co staram się zrobić:

// 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");
});

Następnie chciałbym skorzystać z powyższego wzoru i stworzyć gulp.zadanie w następujący sposób:

const gulp = require("gulp");

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

Jeśli jest plugin, który mogę wykorzystać do tego, proszę, udostępnianie, ale również chciałbym się dowiedzieć, jak to zrobić ręcznie, to tak.

Czy muszę korzystać z through2?

Dziękuję.

Question 2

Możesz użyć jakąś bibliotekę node dom i owinąć ją za pomocą gulp. Na przykład, można spróbować jsdom oraz skórkę 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

Możesz użyć jakąś bibliotekę node dom i owinąć ją za pomocą gulp. Na przykład, można spróbować jsdom oraz skórkę 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"));
});

To wygląda obiecująco, mam zamiar to wypróbować. Pytania: nie widzę nigdzie jsdom w kodzie, jak on tu wchodzi w grę? Przepraszam za moje głupie pytanie, ale jestem nowy w węźle. AKTUALIZACJA: Według dokumentów npm, "plugin[Gulp-dom] обертывает jsdom. Jednak ten plugin nie zawiera wszystkich funkcji oferowanych przez jsdom. Jedynym celem jsdom w tej wtyczce-analizować dokument HTML w DOM, abyśmy mogli wykonywać na nim operacje.
To działa! Dziękuję bardzo. To, co zrobiłem. (1) zainstalowałem jsdom jak uzależnienie od programistów (2) zainstalowałem gulp-dom jak uzależnienie od deweloperów (3) wkleiłem powyższy kod i uruchomił gulp. Przepraszam, nie mogę głosować.
Plugin gulp-dom obejmuje jsdom, nie ma potrzeby instalowania go oddzielnie. Jeśli jesteś zadowolony z odpowiedzi, można go przyjąć.

Muszę napisać własne zadanie Gulp, która usunie atrybuty z mojego HTML

Pytanie

Najlepsza odpowiedź

W innych językach

Ta strona jest w innych językach

Popularne w tej kategorii

Najczęściej zadawane pytania w tej kategorii