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.
3 réponses
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.
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>
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.