Gulp copiez le HTML et collez-le dans un fichier différent

Question

Est-il possible d'utiliser Gulp pour copier une partie de HTML (pas le fichier entier) et l'injecter dans un fichier différent?

J'ai trouvé des packages comme https://www.npmjs.com/package/gulp-html- remplacer

Et https://www.npmjs.com/package/gulp-inject-string

Mais ils ne peuvent pas réellement copier le HTML.

javascript gulp

6

CyberJunkie 5 mars 2016 à 01:33

Answer 1

La gestion du HTML avec une expression régulière n'est jamais conseillée et il existe de nombreux arguments (1, 2 , 3) contre cela.

La façon la plus populaire et la plus fiable de gérer une source HTML est de construire un modèle de document de la source. JSDOM, est un module node.js qui fournit une bonne API de construction DOM. Voici une démonstration de la façon de résoudre votre cas avec JSDOM:

var fs = require("fs");
var gulp = require("gulp");

var dom = require("jsdom");
var domSerialiser = dom.serializeDocument;

var input = "input.html";
var output = "output.html";

gulp.task("copy-html", function () {
    var extractionPoint = "#extraction-location";
    var insertionPoint = "#insertion-location";

    extractFrom(input, extractionPoint).
            then(insertInto.bind(null, output, insertionPoint)).
            then(saveOutput);
});

function extractFrom(file, section) {
    return new Promise(function (resolve, reject) {
        dom.env({
            file: file,
            done: function (error, window) {
                var portion;

                if (error) {
                    reject(error);
                    return;
                }

                portion = window.document.querySelector(section);

                resolve(portion.outerHTML);
            }
        });
    });
}

function insertInto(file, section, portion) {
    return new Promise(function (resolve, reject) {
        dom.env({
            file: file,
            done: function (error, window) {
                if (error) {
                    reject(error);
                    return;
                }

                section = window.document.querySelector(section);
                // you may prefer to appendChild() instead, your call
                section.outerHTML = portion;

                resolve(domSerialiser(window.document));
            }
        });
    });
}

function saveOutput(data) {
    fs.writeFile(output, data, function (error) {
        if (error) {
            throw error;
        }

        console.log("Copied portion to output successfully.");
    });
}

J'espère que l'exemple ci-dessus vous fournira une bonne base pour parvenir à une solution spécifique à votre problème.

2

Community 23 mai 2017 à 12:01

Answer 2

Vous pouvez le faire en utilisant fs et replace, je ne sais pas si c'est la meilleure façon, mais ça marche pour moi.

  gulp.task('injectHtml', function() {
    return gulp.src('/dir/file_to_inject.html')
      .pipe(replace('<!-- injecthere -->', function() {
        var htmlContent = fs.readFileSync('/home/file_source.html', 'utf8');
        //regex to get the div content
        return htmlContent.match(/<div id="myDiv">(.*?)<\/div>/)[0];
      }))
      .pipe(gulp.dest('/dir'));
  });

File_source.html

<html>
 <div id="myDiv">test div</div>
</html>

File_to_inject.html

<html>
 <!-- injecthere -->
</html>

1

Rafael Zeffa 7 mars 2016 à 18:24

Answer 3

Oui, j'utilise généralement through2 chaque fois que je veux injecter du code personnalisé dans le canal:

var gulp = require('gulp');
var through2 = require('through2');
var fs = require('fs');

gulp.task('default', function(){
  gulp.src('./recipient.html')
    .pipe(through2.obj(function(file, enc, done){
      fs.readFile('./donor.html', function(err, data){
        if(err) throw "Something went horribly wrong.";
        // extract from data the HTML you want to insert
        var contents = file.contents.toString('utf8');
        // insert HTML into `contents`
        file.contents = new Buffer(contents);
        this.push(file)
        done();
      });
    });
});

Cela dirigera le fichier html destinataire via gulp, puis lira le contenu du fichier html du donateur. De là, vous pouvez manipuler les deux selon le contenu de votre cœur. Ensuite, vous prenez simplement le résultat, le remettez dans l'objet fichier et repoussez ce ventouse dans le pipeline gulp.

2

Trevor 9 mars 2016 à 18:05

Gulp copiez le HTML et collez-le dans un fichier différent

3 réponses

Questions connexes

De nouvelles questions

javascript