Necesito escribir una costumbre Trago de la tarea que va a quitar atributos de mi HTML

0

Pregunta

Estoy necesitando un poco de la tarea que va a ir a través de todos asignado documentos HTML y eliminar ciertos atributos (tales como style=""). Pensé que podrían haber sido capaces de hacerlo de la misma manera en que lo hago a través del navegador, pero parece que no. Aquí es lo que estoy tratando de hacer:

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

Me gustaría, a continuación, tomar la fórmula anterior y crear un trago.tarea así:

const gulp = require("gulp");

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

Si hay un plug-in que puedo uso que va a hacer esto, por favor compartir, pero también, me gustaría aprender a hacerlo de forma manual como este.

Necesito utilizar through2?

Gracias.

gulp javascript npm
2021-11-20 16:26:41
1

Mejor respuesta

0

Puede utilizar algunos nodo dom de la biblioteca, y se envuelve con trago. Por ejemplo, usted podría tratar de jsdom y la envoltura 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"));
});
2021-11-21 17:18:21

Esto se ve prometedor, estoy a punto de probarlo. Pregunta: no veo jsdom en cualquier lugar en el código, ¿cómo es que entran en juego aquí? Disculpe mi pregunta tonta pero soy nuevo en el nodo. ACTUALIZACIÓN: de Acuerdo a npm docs, "[Gulp-dom] plugin envuelve jsdom. Sin embargo, este plugin no habilita todas las funciones proporcionadas por jsdom. El único propósito para jsdom en este plugin es para analizar un documento HTML en un DOM para que podamos ejecutar operaciones en ella."
desert_dweller

Funciona! Muchas gracias. Aquí es lo que yo hice. (1) he instalado jsdom como un devDependancy (2) he instalado gulp-dom como un devDependancy (3) me pega el código anterior y corrió trago. Siento no poder upvote todavía.
desert_dweller

El trago-dom plugin incluye el jsdom, no hay necesidad de instalarlo por separado. Si usted está satisfecho con la respuesta de que usted puede aceptar.
Nikolay

En otros idiomas

Esta página está en otros idiomas

Русский
..................................................................................................................
Italiano
..................................................................................................................
Polski
..................................................................................................................
Română
..................................................................................................................
한국어
..................................................................................................................
हिन्दी
..................................................................................................................
Français
..................................................................................................................
Türk
..................................................................................................................
Česk
..................................................................................................................
Português
..................................................................................................................
ไทย
..................................................................................................................
中文
..................................................................................................................
Slovenský
..................................................................................................................