Ho bisogno di scrivere un custom Gulp compito di rimuovere gli attributi dal mio HTML

Question 1

Ho bisogno di una Boccata di attività che passerà attraverso tutti ricevuto i documenti HTML e rimuovere alcuni attributi (come style=""). Ho pensato che avrei potuto farlo allo stesso modo, io lo faccio attraverso il browser, ma sembra non. Qui è quello che sto cercando di fare:

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

Vorrei quindi prendere la formula sopra e crea un sol boccone.compito in questo modo:

const gulp = require("gulp");

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

Se c'è un plug-in che posso utilizzare per fare questo, si prega di condividere, ma anche, mi piacerebbe imparare a farlo manualmente come questo.

Avrei bisogno di utilizzare through2?

Grazie.

Question 2

È possibile utilizzare alcuni nodo dom biblioteca, e avvolgerlo con gulp. Per esempio si potrebbe provare jsdom e wrapper 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

È possibile utilizzare alcuni nodo dom biblioteca, e avvolgerlo con gulp. Per esempio si potrebbe provare jsdom e wrapper 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"));
});

Questo sembra promettente, sto per provare. Domande: non riesco a vedere jsdom in qualsiasi punto del codice, come fa a venire a giocare qui? Scusa la mia domanda stupida ma sono nuovo nodo. AGGIORNAMENTO: Secondo npm docs, "[Gulp-dom] plugin avvolge jsdom. Però, questo plugin non attiva tutte le funzionalità fornite da jsdom. L'unico scopo jsdom in questo plugin è quello di analizzare un documento HTML in un DOM modo siamo in grado di eseguire operazioni su di esso."
Funziona! Vi ringrazio tanto. Qui è che cosa ho fatto. (1) ho installato jsdom come devDependancy (2) ho installato gulp-dom come devDependancy (3) ho incollato il codice di cui sopra corse gulp. Mi dispiace non posso dare un voto positivo sicurezza.
Gulp-dom plugin include il jsdom, non è necessario installare separatamente. Se si è soddisfatti con la risposta che si può accettare.

Ho bisogno di scrivere un custom Gulp compito di rimuovere gli attributi dal mio HTML

Domanda

Migliore risposta

In altre lingue

Questa pagina è in altre lingue

Popolare in questa categoria

Domande popolari in questa categoria